LAPORAN PRAKTIKUM

WEB DINAMIS
Pemrograman Website CCN

Disusun Oleh :

Adika Ganesha Damar Putra P (3.34.17.0.01)

Alif Lawu Wijaya (3.34.17.0.06)
IK-2A

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI SEMARANG
2017
 DAFTAR ISI

DAFTAR ISI
1. PENDAHULUAN
1.1. Tujuan
1.2. Ruang Lingkup
1.3. Definisi
1.4. Referensi
1.5. Sistematika
2. DESKRIPSI UMUM
2.1. Perspektif
2.2. Kegunaan
2.3. Karakteristik Pengguna
2.4. Batasan-Batasan
2.5. Asumsi dan Ketergantungan
3. SPESIFIKASI KEBUTUHAN
3.1 Kebutuhan Fungsional
3.1.1 Pendahuluan
3.1.2 Input
3.1.3 Proses
3.1.4 Output
3.2. Kebutuhan Lain
3.2.1 Database
3.2.2 Pengoperasian
4. PROGRESS
4.1 Tahap-tahap

5. KESIMPULAN DAN SARAN

5.1 Kesimpulan
5.2 Saran
1. PENDAHULUAN

1.1. Tujuan
Tujuan dari pembuatan Website CCN ini yaitu :
1. Mempermudah dalam mencari informasi terkini.
2. Memberi informasi terupdate mengenai kejadian terkini.

1.2. Ruang Lingkup

Ruang lingkup dalam pengembangan website ini menggunakan perangkat
lunak berupa sistem database yang input datanya diambil dari form tambah, edit,
dan hapus . Perangkat lunak ini digunakan untuk bagian informasi untuk lebih
mudah mengakses mengganti/mengedit, menghapus, dan atau menambah berita
baru.

1.3. Definisi
Definisi - definisi dari istilah yang digunakan dalam dokumen ini diantaranya:
User : Pengguna dari perangkat lunak
Database : Basis data, tempat penyimpanan data pada perangkat lunak

1.4. Referensi
1.
2.
1.5. Sistematika
Laporan ini dibagi menjadi tiga bagian utama, yaitu :
1. Pendahuluan yang berisi penjelasan tentang tujuan pembuatan
perangkat lunak, lingkup masalah yang dipengaruhi oleh perangkat
lunak yang dikembangkan, definisi, referensi dan sistematika.
2. Deskripsi Umum yang berisi penjelasan secara umum mengenai
perangkat lunak yang akan dikembangkan, meliputi perspektif
deskripsi umum sistem,karakteristik penggauna, batasan-batasan dan
asumsi penggunaan.
3. Spesifikasi kebutuhan yang berisi uraian kebutuhan perangkat lunak
secara lebih rinci.
2. DESKRIPSI UMUM
2.1. Perspektif
Dalam menangani masalah kurang efektifnya akses data mahasiswa bagi
bagian kemahasiswaan yang masih harus membutuhkan data-data yang mudah
terjangkau maka dibuatlah website yang bersifat user-friendly guna memudahka
dan mengefisienkan akses untuk mendapatkan menambahkan dan melihat data
mahasiswa. Website ini menangani bidang kemahasiswa yang sangat
membutuhkan informasi dan berbagai data untuk keperluan kampus agar lebih
mudah mendapatkan meski sedang dalam kondisi yang tidak memungkinkan.

2.2. Kegunaan
Website ini memiliki kegunaan untuk membantu bidang kemahasiswaan
khususnya bidang pendataan mahasiswa untuk lebih efisien dalam mengakses data
kemahasiswaan.

2.3. Karakteristik Pengguna

Karakterisitk pengguna dari perangkat lunak ini adalah diutamakan bagi
bidang kemahasiswaan khususnya bidang pendataan mahasiswa yang
membutuhkan review maupun berbagai informasi mengenai data kemahasiswaan
yang dibutuhkan sebagai data wajib yang diketahui oleh kampus tersebut.

2.4. Batasan-Batasan
1. Website ini hanya dijalankan di Browser yang mendukung HTML5
2. Waktu pengembangan perangkat lunak yang singkat membuat adanya
kemungkinan tidak semua fungsi yang ada dapat dilaksanakan.

3. SPESIFIKASI KEBUTUHAN

3.1 Kebutuhan Fungsional

3.1.1 Pendahuluan
Kebutuhan Fungsional adalah kebutuhan yang harus dipenuhi agar suatu
sistem dapat berjalan atau dapat dikatakan kebutuhan tambahan yang memiliki
input, proses, dan output. Kebutuhan fungsional yang harus ada dalam sistem
yang akan dikembangkan ini adalah sebagai berikut:
1. Website harus dapat menyediakan informasi data dari data mahasiswa.
 2. Website harus dapat mempermudah bidang kemahasiswaan khususnya bidang
pendataan mahasiswa dalam mengakses infomasi mengenai data diri mahasiswa.
3. Aktor yang ada dalam dalam lingkup sistem adalah
a. Admin
I. Login
II. Memeriksa ketersediaan data mahasiswa
III. Mengupdate website

3.1.2 Input
Input / Masukan Pada data pendaftaran
Tombol Tambah : untuk memambah data mahasiswa baru
Tombol Edit : untuk mengubah data mahasiswayang telah ada
Tombol Hapus : untuk menghapus data mahasiswayang telah ada
Input / Masukan Pada Proses pendaftaran
Field Nama : untuk memasukan data nama mahasiswa
Field NIM : untuk memasukan data NIM(nomor induk
mahasiswa)
Field Jenis Kelamin : untuk memasukan data jenis kelamin mahasiswa
Field Jurusan : untuk memasukan data jurusan mahasiswa
Field Prodi : untuk memasukan data prodi mahasiswa
Field No Telepon : untuk memasukan data nomor telepon mahasiswa
Tombol Tambah : untuk melakukan penambahan pada data
Input / Masukan Pada proses Edit Data Pendaftar
Field Nama : untuk mengubah data nama mahasiswa
Field NIM : untuk mengubah data NIM(nomor induk
mahasiswa)
Field Jenis Kelamin : untuk mengubah data jenis kelamin mahasiswa
Field Jurusan : untuk mengubah data jurusan mahasiswa
Field Prodi : untuk mengubah data prodi mahasiswa
Field No Telepon : untuk mengubah data nomor telepon mahasiswa
Tombol update : untuk melakukan penyimpanan perubahan dari
data

3.1.3 Proses
Tampilan muka web ini terdapat form data pendaftar untuk melihat data
mahasiswa yang telah ada. Jika admin ingin menambahkan data mahasiswa baru
maka tekan tombol tambah nanti akan menampilkan form pendaftaran. Dan
apabila admin ingin menganti data dari mahasiswa yang salah atau diperbarui
maka tekan tombol edit di kanan data mahasiswa yang ingin diedit nanti kan
muncul form edit data pendaftar. Sedangkan apabila admin ingin menghapus
 data mahasiswa maka tekan tombol hapus dibawah tombol edit yang berada
dikanan data mahasiswa yang ingin dihapus.
3.1.4 Output
Pada sistem web ini, output yang didapatkan adalah data dari mahasiswa yang
telah terdaftar berupa nama, NIM, jenis kelamin, jurusan, prodi, dan nomor
telepon.
3.2. Kebutuhan Lain
3.2.1 Database
Database yang terdapat dalam sistem informasi berita ini terdiri
dari:
1. Judul Berita
2. Kategori
3. Gambar Berita
4. Akun Administrator
5. Tanggal Rilis
3.2.2 Pengoperasian
Perangkat lunak dapat dijalankan di PC atau Laptop manapun yang
terhubung dengan internet.

4. PROGRES
1. Membuat folder utama berserta subfolder lainnya di dalam direktori xampp/htdocs.

2. Membuat database mysql, jalankan xampp kemudian akses localhost/phpMyAdmin di

web browser. Berikut table yang dibuat dan digunakan selama progress pengerjaan
website.
Di project ini database bernama db_berita, dalam database tersebut terdapat 3 tables.
Admin: table ini berisikan nama, username dan password yang digunakan untuk login
administrator, adapun password yang sudah menggunakan fitur enkripsi.

Berita: table ini berfungsi sebagai tempat dimana berita disimpan.

Kategori: table yang menyimpan semua jenis kategori yang ditambahkan dari
website.

3. Membuat file koneksi ke database MySql. File koneksi dibuat dan

disimpan dengan format .php, file ini diletakkan di dalam folder config di
direktori utama website.
Adapun script untuk mengkoneksikan project dengan database yaitu sebagai
berikut:

Selain script db_connect, ada juga script untuk menggenerate tanggal sesuai
dengan format dd/mm/yyyy, terletak di dalam folder config yaitu function.libs.
Script ini nantinya digunakan untuk memberi tanggal pada tampilan web berita.

4. Membuat file index.php sebagai tampilan utama dari website. Adapun

kode dari index.php yaitu sebagai berikut:
 Mengeksekusi query pada
database db_berita

Memanggil beberapa fungsi untuk tampilan

utama, lihat_berita, kategori.php, dll.

Tampilan:

5. Membuat script untuk melihat berita, kita buat file bernama

lihat_berita.php sebagai sebuah halaman untuk melihat berita. Adapun
script, yaitu :
 Memasukkan header.php dan
eksekusi query pada database

Menampilkan kategori dan tanggal

dipostingnya berita

Desain sidebar, menampilkan

gambar dan query.

6. Membuat fungsi kategori, dimana jika kategori di klik maka akan

menampilkan semua berita dengan kategori yang sama. Script ini
disimpan dalam kategori.php di direktori utama.

Memasukkan header.php dan

eksekusi query

Mencari dan menampilkan berita

yang memiliki kategori yang sama

Memasukkan footer.php
 7. Masuk ke folder layout, folder layout ini kita gunakan sebagai tempat
menyimpan header.php dan footer.php.

Adapun kode dari header.php dan footer.php, adalah sebagai berikut:

Memasukkan db_connect.php dan

function.libs, fungsi connect dan
tanggal sudah terinclude dalam header

Desain header berdasarkan style.css

dan menyertakan index.php,
kontak.php tentang.php, cari.php

Footer.php, hanya berfungsi sebagai penutup.

8. Kembali ke folder utama, sekarang kita akan menuju folder assets, di

dalam folder ini terdapat dua subfolder yaitu css dan images. Folder css
dimana file style.css tersimpan dan images dimana gambar untuk desain
tampilan website tersimpan.
Di dalam folder css, terdapat style.css yang mengatur template dari website
tersebut.

Mengatur templete seputar body pada

website

Merupakan class class yang dipakai untuk

mendesain tampilan utama, meliputi index,
lihat_berita.php, kategori.php, cari.php, header.php
dan juga footer.php
Merupakan class class yang dipakai untuk
mendesain tampilan utama, meliputi index,
lihat_berita.php, kategori.php, cari.php, header.php
dan juga footer.php

Merupakan class class yang dipakai untuk

mendesain tampilan utama, meliputi index,
lihat_berita.php, kategori.php, cari.php, header.php
dan juga footer.php
 9. Sekarang kita akan masuk ke dalam fungsi utama, yaitu CRUD dan yang
lainnya. Navigasi ke folder admin.

Terdapat folder assets dan layout, folder assets berisi sama seperti folder assets
pada direktori utama, melainkan disini hanya digunakan style.css untuk
mendesain halaman CRUD.

Adapun kode dari style.css ini, yaitu sebagai berikut:

Merupakan class class yang dipakai untuk

mendesain tampilan CRUD, meliputi login.php
tambah_berita.php, edit_berita.php, list_berita.php,
tambah_kategori.php, cari.php, header.php dan yang
lainnya
 Merupakan class class yang dipakai untuk
mendesain tampilan CRUD, meliputi login.php
tambah_berita.php, edit_berita.php, list_berita.php,
tambah_kategori.php, cari.php, header.php dan yang
lainnya

10. Kemudian, layout. Di dalam direktori admin ini juga terdapat foder layout
yang isinya adalah header.php dan footer.php, kedua file ini menjadi yang
menjadi header dan footer dalam desain tampilan CRUD.

Adapun script header.php, yaitu sebagai berikut;

Memasukkan/menyertakan
db_connect.php dalam header.php

Menyertakan list_berita.php,
list_kategori.php, list_admin.php,
logout.php serta desain halaman
menggunakan class dari style.css
Footer.php

11. Pada direktori atau folder admin, kita bisa lihat file php yang berisi fungsi
utama CRUD dan login. Dsini akan kita Analisa satu per satu.

edit_admin.php
Merupakan script yang berfungsi untuk mengedit akun admin yang ada di
database, disini saya buat hanya sebagai opsional saja, dalam hasil akhir
edit_admin.php ini tidak diimplementasikan.
 Menyertakan header.php dan
system sesi login yang ada di
login.php

Query database dan kode yang

berfungsi untuk melakukan editing
melalui list_admin.php, kemudian
di update di database

Kode yang membentuk form untuk

mengedit username, password serta
tombol simpan

Tampilan:
Edit_berita.php
Berfungsi untuk mengedit berita yang telah tersimpan di database.

Menyertakan header.php dan

system sesi login yang ada di
login.php

Query database dan kode yang

berfungsi untuk editing berita
melalui list_berita.php, kemudian
di update di database

Berfungsi untuk membentuk form

pengeditan berita, meliputi kolom
Judul, dropdown kategori, kolom
isi dan gambar.
Tampilan:

Edit_kategori.php
Berfungsi untuk mengedit kategori yang tersimpan di database.

Menyertakan header.php dan

system sesi login yang ada di
login.php

Query database dan kode yang

berfungsi melakukan editing
kategori melalui list_kategori.php,
kemudian di update di database

Berfungsi untuk membentuk form

pengeditan kategori, meliputi
kolom kategori dan tombol simpan.
Tampilan:

Hapus_admin.php
File ini juga sebenarnya tidak digunakan dalam hasil akhir, hanya dibuat untuk
opsional saja, tidak diimplementasikan. Berfungsi untuk menghapus akun admin
yang tersimpan di database.

Menyertakan header.php dan

system sesi login yang ada di
login.php

Mengeksekusi query pada database

dan menghapus akun admin
berdasarkan id_admin

Hapus_berita.php
Berfungsi untuk menghapus berita yang tersimpan dalam database.
 Menyertakan header.php dan
system sesi login yang ada di
login.php

Mengeksekusi query pada database

dan menghapus berita berdasarkan
id_berita

Tampilan:

Hapus_kategori.php
Berfungsi untuk menghapus kategori yang tersimpan di dalam database.
 Menyertakan header.php dan
system sesi login yang ada di
login.php

Mengeksekusi query pada database

dan menghapus kategori
berdasarkan id_kategori

Tampilan:

Index.php
Berisi kode yang mendesain tampilan awal yang muncul setelah login berhasil.
 Menyertakan header.php dan
system sesi login yang ada di
login.php

Tampilan:

List_admin.php
Berfungsi untuk menampilkan daftar akun admin yang tersimpan di dalam
database.
 Menyertakan header.php dan
system sesi login yang ada di
login.php serta query pada database
admin

Kode yang berfungsi membuat

form untuk daftar akun admin

Tampilan:
List_berita.php
Berfungsi menampilkan list berita yang tersimpan di dalam database dalam
bentuk table.

Menyertakan header.php dan

system sesi login yang ada di
login.php serta query pada database
berita

Kode yang berfungsi untuk

membuat table daftar berita yang
tersimpan
Tampilan:

List_kategori.php
Kode yang berfungsi untuk menampilkan jenis jenis kategori yang tersimpan di
dalam database dalam bentuk table.

Menyertakan header.php dan system sesi

login yang ada di login.php serta query
pada database kategori

Kode yang berfungsi untuk mendesain dan

membuat table daftar kategori yang tersimpan
di dalam database.
Tampilan:

Login.php
Berisi kode yang membuat system login administrator, untuk dapat mengakses
file php yang meliputi fungsi CRUD harus melewati login administrator ini
terlebih dahulu. Sistem login ini juga diterapkan session dimana mengakses URL
secara langsung adalah tidak mungkin, sekali logout maka akses akan hilang dan
harus login kembali.
 Menyertakan db_config.php sebagai file
yang mengkoneksikan ke database

Fungsi $_POST untuk login, query pada

database admin dan system session. Jika
username/password salah maka akan
ditolak dan muncul pemberitahuan

Merupakan kode yang membuat form

login berdasarkan desain dari style.css

Tampilan:
Logout.php
Berfungsi untuk mengakhiri sesi dan menghilangkan akses administrator.

Menghentikan sesi dan mengarahkan

halaman kembali ke login.php

Page_kontak.php
Berfungsi sebagai editor dari isi halaman “Kontak” di tampilan utama.

Menyertakan header.php dan

system sesi login yang ada di
login.php

Metode $_POST, $_GET dan query

database untuk mengupdate Isi dari
halaman Kontak

Membuat form yang digunakan

untuk mengedit halaman Kontak
Tampilan:

Page_tentang.php
Berfungsi untuk mengedit isi dari halaman “Tentang Kami” di tampilan utama.
Kodenya kurang lebih sama dengan page_kontak.php

Menyertakan header.php dan

system sesi login yang ada di
login.php

Metode $_POST, $_GET dan query

database untuk mengupdate Isi dari
halaman Tentang Kami.

Membuat form yang digunakan

untuk mengedit halaman Tentang
Kami
Tampilan:

Tambah_admin.php
Memiliki fungsi yaitu untuk menambahkan akun administrator, akun yang
ditambahkan ini nantinya dapat digunakan untuk login sehingga mendapat akses
CRUD.

Menyertakan header.php dan

system sesi login yang ada di
login.php
Metode $_POST dan query
database untuk
menambahkan/insert nama, user
dan pass. Disini password juga
dienkripsi dengan MD5, sehingga
aman dan tidak dapat dicuri.

Kode yang membuat form untuk

memasukkan data administrator
yang akan disimpan

Tampilan:
Tambah_berita.php
Berfungsi untuk menambahkan berita baru ke database.
Menyertakan header.php dan
system sesi login yang ada di
login.php

Metode isset, $_POST dan query

database untuk
menambahkan/insert judul, isi,
kategori dan gambar ke database
berita.

Kode yang membuat form untuk

memasukkan data berita yang akan
disimpan ke database
Tampilan:

Tambah_kategori.php
Berfungsi untuk menambahkan kategori berita, kategori yang ditambahkan dan
tersimpan nantinya akan tersedia dalam pilihan saat menambahkan berita dengan
tambah_berita.php

Menyertakan header.php dan

system sesi login yang ada di
login.php

Metode ISSET, $_POST dan query

database untuk
menambahkan/insert kategori ke
dalam database.

Kode yang membuat form untuk

memasukkan data kategori yang
akan disimpan ke database
Tampilan:

5. KESIMPULAN DAN SARAN

5.1. Kesimpulan
Web ini dibuat untuk memudahkan bidang informasi dalam mengikuti
berita terupdate. Data yang bisa dimasukkan pada web ini adalah judul
berita, kategori, dan gambar berita.Web ini masih bisa dikembangkan lagi.
5.2. Saran
Bagi mahasiswa yang lain atau adik tingkat dimohon agar bisa
mengembangkan web ini dengan lebih baik dalam hal tampilan dan
kekomplekan webnya karena web ini sangatlah sederhana.