Berita Online

Tutorial Berita Online | Web Programming

Support by : AMES System

STUDY KASUS : BERITA ONLINEUntuk pembuatan berita online berbasis web, yang perlu kita perhatikan adalah pengolahan data dari berita itu sendiri. Oleh karena itu, sebaiknya kita rancang terlebih dahulu untuk racangan databasenya : APLIKASI BERITA ONLINE Nama Database Nama Table 1. tbberita no judul isi tanggal waktu 2. tbadmin no username password 3. tbbukutamu no nama email website komentar tanggal waktu Nama File Halaman User 1. menu.php 2. style.css 3. koneksi.php 4. home.php 5. index.php 6. berita.php 7. bukutamu.php 8. login.php Halaman Admin 1. index.php 2. bukutamu.php 3. berita.php 4. editberita.php 5. logout.php int(12) auto_increment primary key varchar(50) varchar(50) varchar(50) text varchar(25) varchar(25) : int(12) auto_increment primary key varchar(35) varchar(35) int(12) auto_increment primary key varchar(50) text varchar(25) varchar(25) : dbberitaonline :

Ganesis Alexander

Tutorial Berita Online | Web ProgrammingNama Folder 1. Design Interface : beritaonline

Untuk pembuatan design, silahkan anda gunakan software designer seperti Photoshop maupun Corer. Untuk Ukuran Width = 900px, dan Height = 150px. Simpan dengan nama header.jpg

2. Codding Interface Halaman User

A. Pembuatan Menu dengan fasilitas CSS Langkah pertama silahkan anda buat file baru, simpan dengan nama menu.php Masukkan kode link untuk pemanggilan file style.css. Masukkan kode berikut : style.css Untitled Document

Berita Buku Tamu

Ganesis Alexander

Setelah file menu.php selesai, silahkan anda buat file baru dengan memilih type css. Simpan dengan nama style.css. Silahkan anda ketik kode css untuk menu yang akan kita buat stylenya. /* CSS Document */ #menu { background-color:#00CCFF; width: 200px; } #menu ul { list-style-type:none; margin: 2px; padding: 2px; } #menu li { margin: 2px; padding: 2px; } #menu a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color:#FFFFFF; text-decoration:none; background-color:#0000FF; display:block; padding:2px; } #menu a:hover { color:#FFFFOO; background-color:#FF0000; } B. Pembuatan Index Untuk pembuatan index silahkan anda buat file baru, dan simpan dengan nama index.php Langkah-langkah pembuatan index.php

Dari menu instert > Table Setting table anda sebagai berikut :

Ganesis Alexander

Kemudian klik OK. Atur lah bagian Align> pilih Center.

Masukkan gambar header yang telah anda buat dengan cara letakkan kursor anda pada bagian header, kemudian dari menu Insert > Images, kemudian cari gambar yang telah anda buat, lalu Ok. Silahkan anda design seperti gambar berikut :

Ganesis Alexander

Tutorial Berita Online | Web Programming1. Menambahkan file menu kedalam index.

Kemudian tambahkan table menu yang terletak di kolom pertama baris kedua. Letakkan kursor anda di baris kedua kolom pertama, pilih Horz = Center, Vert = Top. Aturlah table anda dengan settingan seperti berikut :

Kemudian klik OK. Maka hasilnya designnya, seperti gambar berikut :

Letakkan kursor anda pada table yang barusan anda buat, kemudian buka code anda, lalu ketikkan kode berikut untuk memanggil file menu yang telah kita buat. Masukkan kode berikut ini :

Ganesis Alexander

Tutorial Berita Online | Web ProgrammingMaka akan muncul symbol php pada table anda.

Silahkan anda jalankan file index.php anda pada web browser anda.

2. Menambahkan file content kedalam index. Silahkan anda klik pada baris kedua kolom kedua, buka code anda, dan ketikkan perintah berikut :

Ganesis Alexander

Tutorial Berita Online | Web ProgrammingC. Pembuatan File Koneksi

Fiel koneksi ini digunakan untuk menghubungkan ke dalam database, silahkan tambahkan file baru, dan simpan dengan koneksi.php. Untuk kode nya silahkan anda ketik perintah berikut ini : D. Pembuatan file home Untuk file home digunakan untuk menampilkan informasi yang pertama kali muncul. Silahkan tambahkan file baru, kemudian disimpan dengan nama home.php Masukkan kode home kalian didalam sintak home.php BERITA OLAHRAGA SELAMAT DATANG Selamat datang di website berita online, semua informasi tentang olahraga akan kami hadirkan di situs ini.. Silahkan anda jalankan diweb browser anda, dana hasilnya :

Ganesis Alexander

Tutorial Berita Online | Web ProgrammingE. Pembuatan file berita

File berita digunakan untuk menampilkan berita yang diiput oleh admin, berhubung kita belum membuat file administrator, maka untuk data berita, silahkan anda input dari database (localhost/phpmyadmin). Setelah selesai, tambahkan file baru dan simpan dengan berita.php, masukkan sebuah table dengan ketentuan sbb :

Silahkan anda buka code, kemudian anda masukkan perintah berikut ini yang berwarna merah :

Ganesis Alexander

Tutorial Berita Online | Web Programmingberita.php

Lihat hasilnya.

Ganesis Alexander

Tutorial Berita Online | Web ProgrammingF. Pembuatan file bukutamu

Buku tamu digunakan para pengunjung untuk meninggalkan pesan atau komentar tentang website tersebut. Untuk pembuatannya silahkan anda buat file baru, simpan dengan nama bukutamu.php

bukutamu.php Untitled Document Untitled Document

Ganesis Alexander

HALAMAN ADMINISTRATOR Menu Admin - Logout - Buku Tamu - Berita

Lihat hasilnya :

Ganesis Alexander

B. File logout File logout digunakan untuk keluar dari halaman administrator, buatlah file baru dan simpan dengan logout.php (didalam folder admin), silahkan ketik kode berikut ini pada view code : logout.php BUKU TAMU Untitled Document

INPUT BERITA Judul

Ganesis Alexander

Isi
Untitled Document

Berita Online

Documents

Transcript of Berita Online