Development of a Novel Integrated Web-Based System for Advertisement Service ()
1. Introduction
Advertising is an important marketing communication that employs an openly sponsored, non-personal message to promote or sell a product, service, or idea. Advertising is always considered an essential factor for any business or service. An advertisement is a guaranteed method of reaching audiences. To reach the consumer with the target of a business organization largely depends on the advertisement and it can have an immediate impact on business. There are different kinds of strategies for advertising. One of the most popular and ancient strategies for advertising is advertising through billboards. Vehicle advertising is another advertising strategy that is becoming a popular option for advertising in many countries. Modern advertising originated with the techniques introduced for tobacco advertising in the 1920s. Over the years, there have been visible changes in this sector. In contrast to the same old advertising strategies to promote business, now with modern technology and methods, interactive methods of advertising have been introduced, and their results can be seen. In Bangladesh, people spend a huge amount of money on advertising on Facebook as well as on other digital media. However, there are other marketing options available for advertising which add a new dimension to it. Billboards and vehicle advertising can be cheaper and better options.
“Easy Ad” is a web-based online advertisement system to provide a user-friendly and convenient platform for consumers. Through this website, service providers/vendors can easily provide their services and consumers can rent a billboard or use a vehicle for advertising. Also, consumers can be able to see the available billboards and vehicles in all places from their homes. This website is dynamic and managed by the authors of this paper. The main purpose of developing this system was to enable customers to rent a billboard or use a vehicle for advertisement purposes. The system has been designed in such a way that it is intended to make the advertisement system smooth and cost-efficient. Therefore, a customer or a company inside/outside of the metropolitan areas could be able to use it. A popular framework, Django, is used to make this website even better and user-friendly for all types of people who will be able to use the system to its full extent. This template is made up of various static parts of the front-end Hypertext Markup Language (HTML) files as well as a syntax that describes how dynamic content is inserted [1].
Similar work has been done in other countries as well as Bangladesh, for example, [2] [3] [4] [5], etc. and they are offering the services we are talking about. But there is no such advertisement platform that offers advertising through vehicles in Bangladesh. In our system, it’s completely integrated and offers both of the advertising methods. Also, they still have not established themselves as popular advertising platforms with so many limitations. They are yet to reach a huge population, which must be addressed. Vehicle advertisement can be a popular advertising option in Bangladesh and it has enormous potential, but there is still no such platform that offers services regarding vehicle advertisement digitally. Bangladesh is one of the most populated and eight-most populous countries in the world. In order to ensure the transportation of this huge population, there are millions of vehicles running all over the country. It includes public transport as well as private vehicles. However, these vehicles could be used as a vital advertising ingredient.
In our paper, we have analyzed the behavior and preferences of the consumers of our country and fixed the rate accordingly. Also, we have integrated this system for vehicle advertising [6] [7], which has already become popular in many countries, such as in [8].
We all know that advertising is the best way to communicate with customers [9]. It can play an important role in informing customers about the brands available on the market and the variety of products for people of all ages [10] [11]. Billboards and vehicles are extremely effective advertising mediums [12] considered as one of the most vital advertisement tools for a long time. There are numerous organizations involved in this. Nonetheless, it’s often seen that many companies are facing issues with their promotional activities through billboards and vehicles [13]. Also, billboards and vehicle owners cannot utilize their resources properly. So, coming up with an idea to solve these problems through a website can be helpful for people to overcome these problems. Nowadays, the Internet has become very popular amongst ordinary people, and thousands of issues are being solved with the help of the internet. In big cities, billboards are often seen with various kinds of posters for advertisement purposes. To rent a billboard, we need to move physically to find the available billboards. Thus, we spend our valuable time, money, and effort on renting a billboard for advertising.
Public transportation like buses, Compressed Natural Gas (CNG), trucks also play a vital role in advertising and can be a good earning source for a lot of people [14]. And we often face difficulties while handling these tasks. So we have come up with an idea to solve these problems by creating a responsive website.
To solve billboard and vehicle advertisement problems, we have made a website regarding this which intends to help billboards, vehicle owners and consumers through providing the necessary things on a single platform. Customers can rent a billboard or use a vehicle for advertising purposes with the help of this responsive website without encountering any difficulties.
However, they have to provide some important information for their registration. With this website; they can able to see the available billboards and conveyance of all places from their own home. Therefore, they don’t have to face difficulties hiring the appropriate billboard/vehicle in their desired location.
2. Materials and Methods
2.1. Advertising System
The methods and materials that were employed to achieve the aim are discussed in this section. This system aims to ensure a suitable platform for company owners and billboard owners to do their jobs digitally. In this project, we are trying to provide a user-friendly platform for the service providers/vendors so that they can quickly provide their service and consumers can rent a billboard or use a vehicle for advertisement and enable the consumers to see the available billboards and conveyance of all the places from any place.
2.2. Block Diagram
The graphic below shows a block diagram that depicts the whole system. Figure 1 shows the block diagram showing the process by which the system accomplishes the order by the Customers. This system consists of various parameters by which users can select their preferred location and/or the type of advertisement. It helps users to hire billboards and vehicles in their preferred areas for advertising.
![]()
Figure 1. Block diagram showing the process by which the system accomplishes the order by the customers.
2.3. System Architecture
To create the billboard and vehicle advertisement system, we used Django [10] as a back-end framework and HTML, Cascading Style Sheets (CSS), and bootstrap as a frontend. As a text editor, we used Microsoft Visual Studio. Django is a web framework for the Model View Template (MVT) that is used to create web applications. It bills itself as a “batteries included” web framework that emphasizes robustness and simplicity to assist web developers in writing clean, efficient, and reliable code. It is one of the world’s most well-known web frameworks and one of the most widely used frameworks. Instagram, YouTube, Google, and even the National Aeronautics and Space Administration (NASA) utilize it on their websites. For a variety of reasons, we’ve also adopted bootstraps. If we want to reach as many people as possible with our website, we need to expand our business. The website has been designed in such a way that everyone can easily read and view the materials.
The process of placing orders based on priority is explained in further detail in this subsection. The block diagram shown in Figure 2 demonstrates the flow of the method of order placing used for our design.
2.3.1. Model
The model acts as a system interface. It is responsible for maintaining data. It contains the logical data structure working on the application’s back end and a database to represent the relational databases. We have used HTML, CSS, and
![]()
Figure 2. The flowchart demonstrates the process used in order to place an order successfully.
Bootstrap, which are global graphical user interface design systems, to develop a primary accessible interface. The interface must provide visual feedback of the system’s function while abstracting the system’s complexity from the operator. Although there are other ways to improve it, all of these objectives may be met by employing the techniques indicated above. The system uses the interface design described in this part as an output.
2.3.2. View
The view is the User Interface (UI). It represents what the user sees when a website is rendered. Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS) files are used to represent the view.
2.4. Use Case Analysis
Use Case Analysis (UCA) is used to identify a system’s requirements and the information to define implemented processes. UCA also defines classes that are used in the use case diagram and the overall use case.
2.4.1. Use Case for the Users
The system allows customers or users to find billboards and vehicles in their preferred location available for advertisement. A couple of parts of the site are visible but accessible only upon registration and logging in to the system. A user can contact the admins to get the services.
2.4.2. Use Case for Vendors
A rigorous process is required to register as a vendor/owner of a billboard or a vehicle in the system. A vendor must be listed in the Easy Ad to be available on the website. The name used there and the identification (ID) obtained must be registered as a vendor in the service system, and all other necessary information such as email, phone number, National Identity Card (NID), and field of study must also be entered. Vendors can see the website in a different way from the customers.
2.4.3. Use Case for Admin’s
The admin registers in this system as a superuser and has a dashboard enabling a view of all pending registration requests. The admin does not have to do much work to register a customer, but to register a vendor, the admin visits the Django admin panel and checks the database for the vendor’s ID and name. The admin can also edit, delete, and create new users from the dashboard.
2.5. ER Diagram
An ER diagram shows the relationship among entity sets. An entity in a Database Management System (DBMS) is a table or an attribute of a table in the database. Hence an ER diagram depicts the whole logical structure of a database by displaying the relationships between tables and their features. Figure 3 shows the ER Diagram of proposed EasyAd system.
2.6. Software Design
Figure 4 shows the software design. A visitor to the homepage has the option to sign up or log in. To sign up as a vendor or as a customer, you can enter details such as full name, address, phone number, mobile number, and national identity card, and this information is stored in the database. The system admin verifies the vendor before adding that person to the database. Registered customers can log in to the system with a username and password and can then see a list of available billboards or vehicles, and orders can be seen from the vendor’s account.
2.7. Front End Tools
A template from HTML5up is used to create the front end of the EasyAd website. HTML, CSS, and JavaScript are used on the front end. Using this, users can create and structure sections, paragraphs, headings, links, and block quotes for web pages and applications. CSS is used to beautify web pages by giving them different colors and emphasis. Collections of web pages make up a website. JavaScript is a computer language that is used to specify the elements of a web page, such as what occurs when a button is clicked or how data is collected when the website requires it.
3. Project Details
There are three user modules in the EasyAd system:
![]()
Figure 4. Software design of the system.
3.1. Administrator
Description: The administrator should be able to block fraudulent users from using the system. The admin should be able to monitor the entire system. Then we have the vital module of this system, which is the admin module. The job of the admin module is to do all the tasks in the system. The admin has the right to create new users and assign various roles to them. Suppose that any customer or company wants to rent or hire an admin. It will provide them with a possible way to build their business. As a result, the admin has the complete privilege of making any changes throughout the entire system.
Registration Page: In this sub-module, we add the details of the user, like user name, contact number, email id, password, and report, by taking the primary constraint user id. And it also adds these details to the database.
Login Page: In this sub-module, the user gives his login and password to enter. If he is valid, he enters into resume wizard. If he is not valid, he wants proper.
Forgot Password: If user forgets his password, he enters the forgetting password page, thereby giving details of his password.
Change Password: If a user wishes to change his password, he may do so by providing certain information.
Users & Ads: The admin has the right to see users and their ads and has the right to accept or reject them.
User Details: He can check the user’s details if he wants them.
3.2. User Module
• Vendor;
• Customer.
Description: When the user login types of ads appear, he can choose this type. Then he gets a new ad information form. He fills that form and decides to hire or rent.
The advertiser profile module does the following tasks:
• Background history of each company or vehicle;
• Uploading images;
• Updating renting schedule;
• Managing booking appointments.
The advertiser’s module contains all the necessary information that the customers may require to book. The advertiser involved work in their given rental post. They can delete information about their advertisements from the server provided. The customer module, which is the most responsive module, does the following tasks:
• Creating a personal profile;
• Online hiring advertisement;
• Conversing with the support staff via real-time chat.
The customers can look up advertisements from the website and chose accordingly. They can make online bookings for an advertisement plot. They can pay online. They can open up their own profile so that information about them is organized and user-friendly.
3.3. Payment Module
Description: According to the budget, the advertisements are allotted for a specific period. Here, the time period the agency will follow up on their product is specified.
3.4. Back End Tools
The back end makes a website dynamic, allowing it to save data or perform meaningful functions. The rear end also structures web pages and transforms them into a website where data can be sent, saved, or received. The system is built with Python, with a Django framework, which organizes and structures individual web pages to convert them to a website to be hosted on a domain. Django is used for this project because of its modular behavior and colossal scalability. The database used to store the information of all the users is built into Django and follows a structured query language to store the data.
4. Result
Considering the structure of this website, it is divided into two parts. It has a frontend which is the part of the website users can see and interact with. To build this part we have used Html and CSS mostly.
This website also has a backend which is the part of the website users cannot see and interact. Basically, everything is designed in the backend and shown in the frontend. To integrate this whole system we have used a popular framework of python which is known as Django which organizes and structures individual web pages to convert them to a website to be hosted on a domain.
Considering the user module, this website consists of two parts. Two different systems have been built for vendors and customers. For this reason, vendors and customers will not see the same options on the web pages.
Figure 5 shows the landing page, visible to a user who is not logged on. On the left side is there is the option for the Advertisers to resister. And the customer registration part is given on the right side. Those who already have accounts can directly log in from the upper right side. Visitors can directly create a new account from the upper right side or from the left and right side at the middle of the page based on the criteria. Those who want to advertise their product or service should create an account from the right side which is allocated for the customers and those who have available billboards/vehicles for the rent should sign up from the left side which is allocated for the advertisers. The About section of the landing page shows basic information about the website and the contact portion is available for communicating with the admins.
Figure 6 shows the signup page of the vendors or advertisers. This form is for vendor registration. Here, the vendors or advertisers must fill in all essential information, that is, email, password, and full name. Without having an account, vendors will not be allowed to log in and post anything. Vendors must register in a category that is appropriate for them. It can be a customer or an advertiser. When a user gives his email address, name, and password and clicks on the agreement button, the “CREATE ACCOUNT” option becomes unlocked. If a user clicks on the “CREATE ACCOUNT” button, the information will be saved in the database and the system will enable him to log into his account further.
Figure 7 shows the signup page. This form is for customer registration. Here, the customers or users must fill in all essential information, that is, email, password, and full name. Without having an account, users will not be allowed to log
![]()
Figure 5. The landing page of the website.
![]()
Figure 6. Advertiser’s/vendor’s signup page of the EasyAd website.
![]()
Figure 7. Customer’s signup page of the EasyAd website.
in. Users must choose a category that is appropriate for them when registering. It can be a customer or an advertiser.
Figure 8 shows the login page. Two fields enable login using a registered email ID and password to access the website’s additional features. A user without an account can click on the “create an account” link. A user can return to the landing page by clicking on the “back to home” link. Those who haven’t created any accounts can’t log into the website and they must sign up before logging in. In the case of forgetting the password, they will have the option to recover it by following some simple steps.
Figure 9 shows the page where customers can place an order. Here, a customer can see the available billboards situated at various locations. They can also see who the advertiser is. Also, they can have some information about the billboards, such as the facing side, location, size, and rate. Customers can place an
![]()
Figure 8. Login page of the EasyAd website.
![]()
Figure 9. Available billboards with their location and other information on customer’s page.
order from this page and it will be sent to the billboard provider for confirmation. Orders will be approved after confirmation from the advertiser. then, customers can see it as pending order.
Figure 10 shows the page which is seen by the vendors or billboard owners. From here, they can check and approve the orders. They can also view unpaid orders, ads to run, and running ads. Vendors can also post new ads on this page. Basically, all the functions for a vendor are available on this page and the vendors can control the necessary things from this page. They have the option to approve or deny an order which is requested by a customer.
After accepting the ad request by the advertiser/vendor, the customer has to complete the payment method, which is shown in Figure 11 below. From here, the customer needs to provide the transaction ID and a phone number to complete the payment order. After the completion of the payment method, the order will be placed on “ads to run” on the vendor’s page and the vendors will be able to see it.
Figure 12 shows the admin panel. An admin can view a list of all admins, vendors, and customers. The admin can see the messages from here and reply to those messages. From this page, administrators can view all of the advertisers’ activities. They can also control many things from here.
5. Conclusion
Today, the method of advertising has reached the next level. Through ‘branding,’ which equates a product name or image with specific traits in the minds of customers, commercial commercials frequently strive to boost the consumption of their products or services. It’s really an essential part of every business. Therefore, our project could be a reason for the success of so many business organizations. Easy ad is a complete solution for the customer who wants to rent someplace for their advertisement and also for the advertiser who wants to rent his place for promotion without any hassle. By using this application, the customer won’t have to look for a place to post his advertisement. At the same time, the advertiser also does not need to feel any extra pressure to rent his place. This website application has been made by keeping the user’s comfortability while using the application in mind. Therefore any state of people can use it. Besides, publicity techniques have reached a higher level. Business promoters are attempting to increase the use of their products or services by “marking,” which associates an item’s name or image with specific features in consumers’ personalities. It is, in fact, an essential aspect of any business. Consequently, our venture could be an explanation of the progress behind such numerous business associations.
6. Future Work
While working on the system, a few more possible and useful ideas have arisen. Therefore, some strategies are set to implement the ideas in the second phase of the development process. We have a great vision regarding this project. In the future, we will add a few more features to make this more convenient. Also, we have decided to follow some marketing strategies to attract both vendors and customers.
Acknowledgements
The authors of this paper would like to thank the Department of Electrical and Computer Engineering of North South University.