You are here:-, Organizational Management, Privacy, Security, Strategy and Management, Technology, Web Development-Da’wa Technology Implementation – Website Development Project

Da’wa Technology Implementation – Website Development Project

1.     Implementation

The implementation phase in Software development life cycle (SDLC) ensures that the project is implemented following the requirements mentioned in requirement and design phase. The implementation document is to show that all the modules and strategies are implemented in order to meet the requirements of the project. We have been dealing with the development of a website for Islamic Da’wa center that is motivated to provide computer-related courses to its students and visitors. This website is not only focused on providing learning materials to students who are interested in learning basic of computer programming but also to provide updated information for upcoming activities planned by the center. The website will serve as a registration form as well for those who are interested in joining the activity that is planned for immigrants.

In this document, the implementation of the website will be focused that how it is implemented in order to provide functionality to its users and administrators of the website. The foremost important task while designing the admin panel of the website was to look like easy to be used by those who can easily use Microsoft PowerPoint built for making presentations. It is because the administrators of the website will be volunteers as well having little knowledge about using website and managing content on the website.

The implementation document will cover how the administrators will be able to manage websites in order to announce new activates and new courses on the website. It is because the whole project focus is to implement the website and ensure that it is easy to manage as well. Once the project will be implemented successfully, the training on the website will also be given that will guide administrators about how to manage content on it. It is necessary as the administrators may change with time, however, a proper implementation document will also help them a lot and they could learn how to manage the website. The implementation document will explain each and every option available to the administrators and modules and their implementation. In order to make the website easy to manage as easy to manage a presentation, we have chosen a website builder that will help in creating a website and introduce new announcements and tutorials on the website. The website will be implemented using Weebly system that provides easy to manage website themes that can be used to develop a website with drag and drop options and working modules will be placed on the website.

2.     Page Builder

The admin panel of the website is meant to manage the pages on website and content on different pages. In order to get to the admin panel, administrator of the website will have to use its credentials so that he can access the admin panel. Once the user or administrator provides its credentials, he is redirected to the admin page of the website where he is presented with a number of options related to website management that are:

  • Build
  • Design
  • Pages
  • Settings

First, we will start with Pages tab because it is where the pages are to be created so that they could be displayed to the users when they access the website. On Pages page, all the pages are presented on the Left side panel of the admin panel. It shows all the pages that have been created on the website. Left side panel not only displays pages but also works as menu setting for displaying on the header of the website. On top of the left side panel, there is an option available for creating a new page, “Add Page”. When the administrator will click on Add Page button on right side of the page there will be options displayed relevant to the creation of a new page. The first option is Page Name that is displayed on top of the tab when users access the page.

<!DOCTYPE html>

<title>Page Title</title>


In this tab, the user enters the name of the page that he is creating. The second option is the layout of the page. There are four options to be selected from: one layout displays tall header on the page, the second layout present small header, the third layout does not display any header while the fourth layout is to create the landing page. In this case, if we are creating landing page we will select the last layout and name it on the welcome page.

There are further options available if the user wants to displays page he created in menu items or hide it from users. Another important option that this page builder offers is to restrict the page to be accessed. It means that the administrator can design pages for teachers and other faculty members and provide them separate space. The teachers or faculty members having credentials will only be able to access those pages. Once the administrator has created a page he will save the page. There are other options as well like to edit already created a page or deleted the specific page.

It is important to note that creating an saving that page does not mean that the page will be displayed on the website. The page has to be published as well in order to be displayed. Once the page is published, it will appear on left sidebar where the administrator can place in the menu if desired. He can create menu and submenu as well by just dragging and dropping the specific menu. The above screenshot shows the software engineering is the main menu item while level 1, level 2, level 3, level 4 and level 5 are sub menu items that will be displayed only when the user will hover on software development menu. Otherwise, those menu items will be hidden.

3.     Build

The build section of the administration side of the website is meant for building a page and displaying content on it. On the left side of the page, there is a page containing different elements that can be added to the page that the user or administrator is intending to. On top of the left side panel, there are different options containing Text, Layout, Media, and currency that can be added and modified as well. For example, if the text that we need to display on the website can be formatted as well as text weight, color style etc. The second option is used to design layout of the page. In the same way, media button will help in formatting pictures and videos on the page to be formatted.

The second section on the left side panel is “Basic” that offers 9 widgets to be added to the page. Those widgets are

  • Title
  • Text
  • Image + Text
  • Image
  • Gallery
  • Slideshow
  • Map
  • Contact Form
  • Site Lock

·        Title

  • The title widget is used to give title name to a page that we have already created. Text

The second widget is the text widget when the administrator of the website wants to add text to a specific page then he will use this text widget. With the help of text widget, he can assign a specific area on the page where he wants to display text. The text can be formatted in different ways in accordance with the theme of a website like changing color or matching font that is already used on the whole website. Text widget allows the administrator to choose a specific area on a specific place on the page as it can be done simply by dragging the widget from the left side panel of Build page and dropping it to the right side of build page where the admin will be building page.

·        Slideshow

The slideshow is another widget that can be added to the page in order to display different images moving randomly in the specific area. The administrator has no need to write javascript for adding slideshow but just drag and drop the widget on the page and place it where it wants to display. The second thing that admin will have to do is to add pictures that should be displayed in the slideshow and add a description to each image. In this way when one image will be shown in the slideshow below will be the description as well telling about the image.

There are different slideshow styles as well the admin can choose from like as moving pictures from the right or left of fading away and appearance of the new image. Welcome page of Da’wa Technology was designed using text, slideshow and media options that will add videos to bottom of the page.

The welcome page describes the best use of Slideshow and Text widget on pages. The same widgets can be used to design other pages on the website as well. Each widget is very easy to use and administrators who will have knowledge about editing presentations can also be able to manage the website and design pages.

·        Contact Form

Basic panel on the left side on design page also offers contact form widget that the administrators can use when the visitors to the website need to contact the center. This contact form can be created according to requirements by the site administrator. The admin can define text fields of forms like which text field should only accept alphabets like first name and last name should only accept alphabets. The user should not be able to write any special character or number in these fields. Moreover, the administrator can also make certain text fields mandatory to be filled in by visitors. If those fields are left empty the user will not be able to submit his request for registration.

In Da’wa Technology website, the administrator has used contact forms as a registration form for certain activities being organized by the center. The administrator is able to design registration form according to information required for any activity, he can use the drop-down menu, radio buttons, checkboxes and many other options. It gives freedom to administrators that they have no need to code the registration form every time they want to announce a new activity on the website. They can just do it by simply using contact form widget on admin panel.

Above screenshot shows the use of contact form and text widget in order to announce an activity and also providing registration form. Once the user fills that form all of this information will be emailed to the administrator so that a record can be kept in order to know how many people are interested in joining that specific activity.

·        Image

Image widget is one of the widgets available on the left side panel on design page that helps the administrator to add images on the page. This widget works simply as admin can specify a certain place on the page for image and place the desired image in that specific place. The admin can also manage the size of widget considering overall page distribution for other content.

Admin of website can also set the orientation for the image to be displayed on the page, either on left or right side of the page. Images on a web page can also be displayed in a row as the admin wants to display image using gallery widget. All the widgets can be used on a single page like videos can also be embedded on the same page where the admin has placed an image.

·        Map

There are times when the map is also required to be displayed on the page in order to help visitors find the place easily. There is a Map widget that can be placed on a page. The admin has to provide coordinates for specific locations and map to that location will be displayed.


We have discussed basic widgets that design page offers to admin in order to display different type of content. There is another option that Da’wa technology website offers to its administrators that is structure means how to divide the page into different portions without writing code. There are three options available for a structure that is:

  • Divider
  • Columns
  • Button

·        Divider

Divider widget helps administrators to divide the same webpage into a different portion, it means that the same page can display information related to different activities being offered by the center. If we talk about displaying a line then there will be code needed in order to draw a line, however, da’wa website should be able to be managed by computer users with basic knowledge so divider widget helps them to draw a line in order to separate different sections.

·        Columns

A column widget is used to draw a table which can contain different columns to display information separately. For example, we need to display image on left side of the page and its description on the right side of the page, for this reason, columns widget will be used that will allow admin to display image and information separately.

·        Button

Button widget also allows admin to add a button to redirect to a different page or submit a registration request. It will not require the admin to write code for a button and then apply CSS to it but simply drag and drop can do it. The admin can easily name the button and change its color as well.  The following screenshot will show the use of these three structure functionalities.

About the Author:

Leave A Comment