Content uploaded by Asrul Huda
Author content
All content in this area was uploaded by Asrul Huda on Jul 13, 2020
Content may be subject to copyright.
Content uploaded by Asrul Huda
Author content
All content in this area was uploaded by Asrul Huda on Jul 13, 2020
Content may be subject to copyright.
77:23 (2015) 27–33 | www.jurnalteknologi.utm.my | eISSN 2180–3722 |
Jurnal
Teknologi
Full Paper
WEB BASED ADVERTISING INFORMATION
SYSTEM DESIGN FOR NEWSPAPER
Titi Sriwahyuni, Asrul Huda*, Dede Senjaya Afka, Depi Suadi
Education Program Technical Information,
Electronic Engineer Department, Technical Faculty,
Padang State University
Article history
Received
27 April 2015
Received in revised form
15 June 2015
Accepted
25 November 2015
*Corresponding author
asrulhuda@gmail.com
Graphical abstract
Abstract
Singgalang daily newspaper is a print media company which is not only engaged in
journalism, which provides the latest news but also in advertisement. The advertisement
booking system of Singgalang daily newspaper is not fully computerized yet particularly
with regards to the database system for saving ordering and payment data. The company
still uses receipts and calculators, causing errors in calculation that make Singgalang daily
newspaper advertisement transaction inefficient and ineffective. The company wanted
to develop an advertising information system which is equipped with an e-commerce that
can help costumers in promoting their product and facilitate costumers in booking
advertisement in Singgalang daily newspaper. A web-based information system was
designed using Hypertext PreProcessor (PHP) and Framework Codelgniter which will
facilitate employees of the company to manage ordering and payment data for online
advertising.
Keywords: Information system, Hypertext Preprocessor, Codeigniter
© 2015 Penerbit UTM Press. All rights reserved
1.0 INTRODUCTION
Development in science and technology, which
encourages the development of information plays an
important role in every activity of an agency. That
information is used to support decision making as well
as in the completion of a routine job. Because of the
role and functions of such information, then it is
required information quickly and accurately.
Computers are one of the tools that play a role in
terms of information provision, so it's been a lot of
agencies are beginning to utilize a computer to help
their job.
Along with the development of the technology
continues to evolve, the use of the internet as a
medium of information providers which is better
known as web has been used for various activities,
such as sales, promotions and other activities.
Singgalang daily newspaper is a print media
company that provides columns and rows advertising
as a promotional medium enterprise for local and
national company in the field of property,
transportation, communication, food and others [1].
Through the design of advertising information
system, it is expected to provide facilities for staff,
managers and leaders of Singgalang daily
advertising, so that in the process of managing and
processing advertisement is fast, precise, and
accurate. In addition, because the human need to
make purchases quickly and cheaply with clear
information, so people have to create a system that
can ease their work. No exception with the seller of
goods or services that try to create a new path
forward in marketing the products offered.
To support this system it is planned that the
construction of the facility of media e-commerce as a
tool or a modern way to introduce a product of both
goods and services over the internet technological
sophistication, so that customers who will order the
advertisement to be published in Singgalang daily
newspaper can also provide information about their
products to this website in order to expand their
marketing reach.
28 Titi Sriwahyuni et al. / Jurnal Teknologi (Sciences & Engineering) 77:23 (2015) 27–33
2.0 ANALYSIS AND SYSTEM DESIGN
Systems analysis was used to identify problems that
exist in the system and formulate the solutions. An
analysis of advertisement pricing ordered by the
costumers of Singgalang daily newspaper can be
described in a flowchart in Figure 1.
Figure1 Flowchart of Advertisement Pricing
The design of the system aims to describe and
sketch or arrange the separate elements into a unified
flow. The design of diagram context of advertisement
information in Singgalang daily newspaper is
presented in Figure 2.
Figure 2 Context Diagram Design of Advertising Information
System
The context diagram design, which illustrates the
process of what is being done by each user/player in
the system is further developed into the Case Diagram
Design System for Advertising Information as shown in
Figure 3.
Figure 3 User Case Diagram Design System for Advertising
Information
The Case Diagram Design System for Advertising
Information can then be used to determine and
develop the activities of the users. The design of the
entity relationship diagram (ERD) of the advertisement
information system can then be proposed as in Figure
4.
Figure 4 The Entity Relationship Diagram (ERD) of
Advertisement Information System
Entity Relationship Diagram (ERD) in Figure 4 is a
mapping of the relation that contains the
components of the entity and a set of relations that
exist in the system equipped with the advertising
information as well as the key attributes. The design of
the interface is an important part in the design of the
system, as first seen when the system runs is a display
interface system. The index page becomes the start
page when the user opens Singgalang daily
newspaper advertising information system on the web
browser. The index page contains several menus;
Home, Register, Login and other links such as
advertisement pricing information which can be seen
in Figure 5. The design of the registration display is
shown in Figure 6.
Figure 5 Design of Inex page of advertisement information
systems
Figure 6 Design of registration page of advertisement
information system
29 Titi Sriwahyuni et al. / Jurnal Teknologi (Sciences & Engineering) 77:23 (2015) 27–33
The registration page is the page that appears when
the user presses the menu button on the registration
page of the index. If the user has already registered,
then the customer can login and book an
advertisement in the advertisement order form. The
advertisement booking page is shown in Figure 7.
Figure 7 The design of the advertisement booking page
The booking page is a page that customers can
enter the date of advertisement booking by inputting
some advertising data. Advertisement data are in the
form of the name, page, type, color, size, number of
columns or rows, as well as notes for a detailed
explanation of the advertisement. The design of
product uploaded view can be seen in Figure 8.
Figure 8 Design of products upload page
Other than ordering advertising, customers can also
upload their products on the system for promotion.
3.0 RESULTS AND DISCUSSION
The results of the design, illustrate the results of the view
or menus that can be accessed and available on this
informational system. The display on the index page of
this system is shown in Figure 9.
Figure 9 Index page views
The index page is the initial view of the advertisement
information system of Singgalang daily newspaper.
The index page of the system consists of images and
the login form. On the header there is a header
image, on the left sidebar, there is a date and hit
animated counter to count the number of visitors. The
animation scripts which used index php [2-3] is as
follows:
<embed src="<?php echo
base_url();?>/images/calendar.swf"
quality="high"
pluginspage="http://www.macromedia.com/go/get
flashplayer" type="application/x-shockwave-
flash" width="226" height="200"></embed>
To display the hit counter, the script which used in
index php is as follows:
<?php $this->load->view('counter/acounter');
?>
The display of the registration page can be seen in
Figure10.
Figure 10 Display of registration page
The registration page must be filled by a customer
before they can log into the system. On the
registration page, there are several text fields for new
customer data input. One example is the text field to
input the username and name where the scripts which
used are as follows:
Form Registrasi</h2></center><br><br>
<table cellpadding ="10" align="center"
class="form"><tr class="head"><td colspan
="14"></td></tr><tr><td
width="200"><h4>Username: <font
color="red"><?php echo
form_error('username'); ?></td><td><input
type="text" name="username" maxlength ="25"
size ="30" placeholder ="Masukkan Username"
value="<?php echo set_value('username');
?>"></td></tr><tr><td>
<h4> Nama lengkap: <font color="red"><?php
echo form_error('nama_pelanggan');
?></font></td><td><input
type="text"name="nama_pelanggan" maxlength
="25" size ="30" placeholder ="Masukkan Nama
30 Titi Sriwahyuni et al. / Jurnal Teknologi (Sciences & Engineering) 77:23 (2015) 27–33
Lengkap" value="<?php echo
set_value('nama_pelanggan');
?>"></td></tr><tr><td>
If the data entered is correct, it will show a
notification and new customers can log in.
The menu page for costumer will appear after the
customer has log in. The display menu page for the
customers can be seen in Figure 11.
Figure 11 The menu display of customer page
Booking page is a page to input the data of
advertisement which want to be published. There are
some data which are automatically input and not be
able to be change data all after the customer selects
a page, advertisement type, color and size of the
advertisement. Those data is in form of
advertisement’s price every column or rows and the
total bill. The display of booking page shown in Figure
12.
Figure 12 Booking page display
The storage process using script is as follows:
$this->mpemesanan-> simpan_pemesanan();
redirect('cdaftarpemesanan/index','refresh');
}
And the booking models are as follows:
function simpan_pemesanan(){ $session_data =
$this->session->userdata ('logged_in');
$username = $session_data['username']; $tipe
= $this->input->post('jenisiklan');if
($tipe=='Baris'){$tipeukuran =
'Baris';}else{$tipeukuran =
'Kolom';}$simpan_data =array('username'=>
$username ,'nama_iklan' => $this->input-
>post ('namaiklan') ,'jenis_iklan' =>
$this->input->post ('jenisiklan'),
'harga_perukuran'=> $this->input->post
('harga'), 'halaman'=> $this-> input-
>post('halaman'),'warna' => $this->input-
>post('warna') ,'jumlah_ukuran' => $this-
>input->post('ukuran') ,'total_tagihan' =>
$this->input->post('biaya'), 'catatan' =>
$this->input->post('catatan'), 'status' =>
$this->input->post('status')
,'tipe_ukuran'=>$tipeukuran,);$simpan =
$this->db->insert
('pemesanan',$simpan_data);return $simpan; }
To simplify the advertising staff’s work, customers are
allowed to design their own advertisement and
upload their advertisement in Singgalang daily
newspaper. The booking image upload page is a
page to input advertisement image which the
customer wants to publish. The display image upload
page order is shown in Figure 13.
Figure 13 The display of upload views order page
On this page, the customer can choose
advertisement file according its pixel size, if the size is
smaller, the number of pixels required to upload the
image will be also smaller.
The script which is used to upload the image:
if ($jumlah_ukuran== '1'){$jum="162";}else if
($jumlah_ukuran=='2'){$jum="340";}else
if($jumlah_ukuran== '3'){$jum="517";}else if
($jumlah_ukuran=='4'){$jum="695";}else
if($jumlah_ukuran== '5'){$jum="873";}else if
($jumlah_ukuran=='6'){$jum="1050";}else{$jum=
"1228";} if( $this->form_validation->run() ==
TRUE ) { $this->input-
>post('go_upload');$config['upload_path']
='images/ iklan/';$config['allowed_types'] =
'gif|jpg|png';$config ['max_size'] = '5000';
$config ['max_width'] = $jum ;
$config['max_height'] = $jum; $confige=
$filename.
mysql_real_escape_string($_FILES['userfile'][
'name']);$config['file_name'] =str_replace ("
", "", $confige); $this->load-
>library('upload', $config);
The above command can upload the image to the
provisions of reservations where 5Mb is the maximum
size with the length and width according to the size of
the number. For example, if the size of the column 5
the maximum width and length of uploaded images is
873 pixels. Images are uploaded only by the png, jpg
and gif type. The images will be stored in the image
folder and sub-folders for advertising.
An advertisement payment page is a page to input
the payment data which the customer wants to
31 Titi Sriwahyuni et al. / Jurnal Teknologi (Sciences & Engineering) 77:23 (2015) 27–33
publish on the condition it has been confirmed
previously by the advertising staff. The Display of
Payment Page is as shown in Figue 14.
Figure 14 Payments page display
On this page the customer can only order dated
advertisement for the following day before the 12:00
deadline and the date of the transfer should not be
past the date of publishing. Once a customer makes
a payment action by clicking the button "Pay", the
payment data will be automatically stored and the
advertising inventory will be reduced.
The receipt print page is the page to change the
data and print receipts of the advertisement you want
to publish on the condition has been confirmed
previously by the advertising manager (refer Figure
15).
Figure 15 Receipt print page display
Changing the date and canceling the publishing
request for the following day publication can be done
by the 14:00 deadline. Printing a receipt of each
publication can be done by clicking the "Print
Receipt" which automatically produces the receipt
(refer Figure 16).
Figure 16 Receipt display
Pages for booking list are pages to print the report of
booking. The displayed order list is as per Figure 17.
Figure 17 Display of booking page
The function of this page is to display the ordering
data where the staff can print the advertisement
ordering and downloading costumer’s advertisement
image. To download click on the "Download Image",
and to print the ordering report. click "Print All Data
Report". The following page will automatically display
Figure 18 Display order reports
The uploaded page is a product page for the
product you want input data promoted by the
customer. Display upload product are as follows:
Figure19 Product upload page display
32 Titi Sriwahyuni et al. / Jurnal Teknologi (Sciences & Engineering) 77:23 (2015) 27–33
Script of the uploaded image:
$this->input->post
('go_upload');$config['upload_path']='images/
uploaded /';$config['allowed_types'] =
'gif|jpg|png';$config['max_size']='5000';$con
fig[' max_width']='1024';$config
['max_height']='768';$this->load-
>library('upload', $config);
The above command is a command to upload the
image with provisions maximum size is 5 Mb with a
width of 1024 pixels wide, 768 pixels long, and can only
input type such png, jpg and gif. The images will be
stored in the image folder and uploaded subfolders.
It is needed that staff checks the product name and
product notes and picture which are inputted by the
customer. If appropriate, clear and comply with the
action, the staff will click Confirm'. So, the data about
the status of these products will be change and other
customers can see the product promotion. Product
confirmation display is as follows:
Figure 20 Confirmation page display products
Script to retrieve product data from the database is
as follows:
public function edit($num, $offset){$this-
>db->order_by("kode_produk", "desc");$data =
$this->db->get('produk',$num, $offset);return
$data->result();}
Script to view this page is as follows:
<td>Nama Produk: <?php echo $row-
nama_produk;?><br><br>Kategori: <?php echo
$row->kategori;?><br><br> Harga : Rp.<?php
echo $row->harga;?><br><br>Catatan: <?php
echo $row->catatan;?></td><td><img src="<?php
echo base_url();?>images/uploaded/ <?php echo
$row->nama_gambar; ?>"
width="200"height="200" "></td><td> Nama
:<?php echo $row->nama_pelanggan; ?><br><br>
Telepon :<?php echo $row->telp_pelanggan;
?><br><br> Email :<?php echo $row-
>email_pelanggan; ?><br><br> Alamat :<?php
echo $row->alamat_pelanggan; ?></td>
Based on the script above, the product
confirmation list page displays all the product data
stored in the product table in the database of the
product.
After the process of designing Singgalang daily
newspaper advertisement information system
wascompleted, it can be said that this system can
facilitate the customers and employees of Singgalang
daily newspaper in advertisement booking
transaction. The system can process data of ordering
and payment for advertisements which are then
saved to a database. The data can be accessed a
gain in the form of daily, monthly or yearly which can
be accessed by authorized employees.
In making this information system, the authors use
code igniter as framework. By using a framework that
utilize MVC design pattern and common function that
already exists in the frame work then it can speed up
the application development process [2]. The author
felt that designing this information is easier to do than
not using the frame work for each form or
appearance that madeher already divided each
class making it easier to in making the manufacture
and development of this information system. One
advantage of wearing the MVC design pattern
(Model View Controller) which has a higher level of
security because of the access and the database
connection is controlled and regulated by the
controller.
4.0 CONCLUSION
The conclusion that can be drawn from the design of
advertisement information system with e-commerce
facilities in Singgalang daily newspaper is to apply PHP
programming language using code igniter framework
to develop a system of advertising information with e-
commerce facilities in Singgalang daily newspaper.
This system can assist customers in booking
advertisements transaction in newspapers. This system
equipped with e-commerce services that enable
customers to upload products to promote their
products. This system also can help Singgalang daily
newspaper in data storage management and
advertising bookings.
Based on the discussion and the conclusions
suggested in the subsequent development of this
system can not only serve customers of Singgalang
daily newspaper, but also some other common
subscribers daily newspaper in the city of Padang in
booking advertisement that will be published in
newspapers.
Acknowledgement
We are grateful for the UNP scholarship to Author 2
and Author 4.
References
[1] Harian Umum Singgalang. Harian Singgalang [online]
Tersedia:http://harianSinggalang.co.id/informasi/. [01
Februari 2014]
33 Titi Sriwahyuni et al. / Jurnal Teknologi (Sciences & Engineering) 77:23 (2015) 27–33
[2] Ibnu Daqiqil. 2011. FrameWork CodeIgniter Sebuah
Panduan dan Best Practice.Pekanbaru:E-Book
[3] Jogiyanto HM. 2005. Analisis dan Desain Sistem Informasi.
Yogyakarta : Andi.
