• Tidak ada hasil yang ditemukan

LAPORAN TUGAS PROYEK WEB PORTAL BERITA

N/A
N/A
Protected

Academic year: 2018

Membagikan "LAPORAN TUGAS PROYEK WEB PORTAL BERITA"

Copied!
60
0
0

Teks penuh

(1)

LAPORAN TUGAS

PROYEK BERITA

Diajukan untuk memenuhi tugas mata kuliah Pemrograman Web Teori

Dosen Oleh : Haryanto, S.Kom

DISUSUN OLEH :

NINUK DIRGANTARI (311-5311-044) MUHAMMAD ARYA NUGRAHA (515-0311-009) NUR ZAENI SAEFUDIN (515-0311-017) ADIT PURNOMO AJI (515-0311-025) DZIKRI NANDI ASA (515-0311-035) ACHMAD SUDRAJAT (515-0311-043) MUHAMMAD ALFIAN FANDI (515-0311-051)

FAKULTAS BISNIS DAN TEKNOLOGI INFORMASI

UNIVERSITAS TEKNOLOGI YOGYAKARTA

(2)

LEMBAR PENGESAHAN

Nama Perguruan Tinggi : Universitas Teknologi Yogyakarta Program Studi : Sistem Informasi

Mata Kuliah : Pemrograman Web

Waktu : Kamis, 11:10 – 12:50 WIB

Tempat : Kampus I Universitas Teknologi Yogyakarta (F25)

Judul Project : Portal Berita

Nama :

1. NINUK DIRGANTARI (311-5311-044)

2. MUHAMMAD ARYA NUGRAHA (515-0311-009)

3. NUR ZAENI SAEFUDIN (515-0311-017)

4. ADIT PURNOMO AJI (515-0311-025)

5. DZIKRI NANDI ASA (515-0311-035)

6. ACHMAD SUDRAJAT (515-0311-043)

7. MUHAMMAD ALFIAN FANDI (515-0311-051)

Laporan ini selanjutnya akan diajukan kepada dosen pengampu pada 22 Desember – 29 Desember 2016.

Yogyakarta, 29 Desember 2016

Mengetahui,

Dosen Pengampu

Haryanto, S.Kom

Ketua Kelompok

(3)

KATA PENGHANTAR

Alhamdulillah, Segala puji bagi Allah S.W.T yang telah memberikan kita rahmat, hidayah serta inayahnya kepada kita, sehingga kami dapat menyelesaikan Laporan Tugas Proyek yang telah diberikan dosen pengampu kepada kita, dan kami berharap rahmat tersebut dapat menjadikan kita lebih beriman dan bertaqwa kepada Allah S.W.T.

Sholawat serta salam tetap tercurahkan kepada junjungan besar kita, Nabi Muhammad S.A.W, Keluarga, Sahabat. Dan Semoga kita sebagai umatnya, bisa mendapatkan syafaat beliau di Akherat kelak.

Alhamdulilah, kami telah menyelesaikan Laporan Tugas Proyek mengenai pembuatan program yang dapat digunakan secara efektif dan kondusif dalam masyarakat umumnya.

Dalam penulisan Tugas Proyek ini, Penulis mendapatkan berbagai

pengetahuan dan pengalaman yang sangat menakjubkan, serta juga mendapatkan berbagai saran, kritik yang tentunya bersifat membangun baik dari audiens, mentor, maupun dosen pengampu. Oleh karna itu, dengan segala hormat dan kerendahan hati, perkenankanlah penulis untuk mengucapkan terimakasih kepada :

1. Haryanto, S.Kom Selaku Dosen Pengampu Mata Kuliah

Pemrograman Web Prodi Sistem Informasi, Fakultas Bisnis dan Teknologi Informasi, Universitas Teknologi Yogyakarta

2. Teman Teman seperjuangan dalam Mata Kuliah Pemrograman Web Prodi Sistem Informasi, Fakultas Bisnis dan Teknologi Informasi, Universitas Teknologi Yogyakarta

3. Audiens yang telah bersedia mendengar, mencoba, mengamati serta meminati mengenai presentasi program yang telah kami buat. 4. Semua pihak yang tidak mungkin penulis sebutkan satu persatu

(4)

Dalam Penyusunan Laporan Tugas Proyek ini, Penulis sangat meminta maaf untuk berbagai kekurangan dan keterbatasan baik yang di sengaja maupun yang tidak disengaja.

Penulis Sangatlah mengharapkan kritik dan saran yang bersifat membangun dari segala pihak untuk lebih memperbaiki satu sama lain.

Dan Penulis sangatlah mengharapkan Laporan ini dapat bermanfaat baik bagi penulis, Universitas, Institusi Pendidikan dan masyarakat Luas.

Yogyakarta, 22 Desember 2016

(5)

DAFTAR ISI a. Cara kerja Program

...4 b. Screen Shoot Menu

...4 VIII. BAB IV

(6)

a. Daftar Kampus

...7 b. Daftar Fakultas

...7 c. Daftar Semester

...7 d. Rekapitulasi Quisioner

...7 e. Link Video Presentasi

...8

IX. BAB V

BLOG ... ...10

CERITA PRESENTASI

...10

X. BAB VI

(7)

BAB I PENDAHULUAN

A. Latar Belakang

Berhubungan dengan berjalannya dan berkembangnya berbagai teknologi dalam era globalisasi ini yang sangat dapat membantu dan mempermudah para manusia untuk melakukan dan mengerjakan berbagai macam aktifitas, seperti contohnya untuk membaca berita ataupun mencari informasi tanpa harus membeli koran pada umumnya dengan menunggu kedatangan para penjual koran setiap harinya.

Maka dari itu dapat diketahui bahwa dengan teknologi dan perancangan ini akan dapat membuat kita lebih mudah dalam melakukan segala sesuatunya, dan sebagai gambaran umumnya adalah kami

memikirkan mengenai kebiasaan atau suatu akitifitas yang sering dan sangat disukai oleh manusia, dan kami menentukan mengenai membaca sebagai kebiasaan yang banyak diminati oleh para pencari informasi, dalam prosedurnya untuk membaca berita kita memerlukan sebuah koran untuk dibaca setiap harinya, dan untuk membaca berita tersebut harus kita membeli kepada penjual, tetapi dengan ini kata lainnya kita harus

membacadan membeli dengan didatangi secara langsung pembaca/ penjual tersebut, dan koran tersebut sudah banyak yang pesan/ langganan maka akan mempersulit bagi para penggemar untuk menjalankan aktifitasnya.

Maka dari itu penulis memikirkan mengenai bagaimana kita dapat membaca berita tanpa harus didatangi /mendatangi tempatnya pembaca /penjual, maka kami buatlah “Portal Web Berita” untuk mempermudah para penggemar baca berita ini dalam menyalurkan hobi mereka dalam membaca berita/ mencari informasi harian.

B. Tujuan

(8)

1. Mempermudah bagi para penggemar baca berita untuk mencari informasi bacaan tiap harinya

2. Mempersiapkan Program siap saing di tanduk era Globalisasi 3. Memudahkan pembaca dalam mengontrol kategori berita yang

akan dibaca

4. Menunjukan portal berita secara lengkap tanpa harus membeli koran yang begitu tebal

C. Sasaran Program

Sasaran Program kami adalah Para penggemar baca berita khusunya wilayah Indonesia, serta para penggemar dari baca koran untuk dipakai dan dipergunakan sebagai pemermudah mereka dalam mencari informasi berita mereka ataupun pekerjaan mereka.

D. Masalah

Masalah dalam program ini kami nyatakan memiliki masalah mengenai kurang lengkapnya rincian kategori, khususnya kategori berita yang seharusnya ada dalam portal berita, dan juga dalam kerapian input dan output berita dari database.

BAB II

PROSES PRODUKSI

1. Storyboard

(9)

2. Fasilitas / Peralatan

Alat :

No. Nama alat karakteristik Jumlah keterangan

1 Laptop Lenovo Lenovo Prosessor

Core i3 2 Kondisi baik

2 Laptop Asus Asus Prosessor

Celeron 1 Kondisi baik

3 Netbook Acer Acer Prosessor Intel

Atom 1 Kondisi baik

4 Modem Three/ Tri/ 3 1 Kondisi baik

5 Internet Hotspot - Kondisi baik

Bahan :

No. Nama Bahan versi

1 Sublime Sublime text 3

2 Xampp Control

Panel Xampp Control Panel 1.7.4

3 Pencil Pencil v. 2

4 Mozilla Firefox Mozilla Firefox v. 48.0.2

5 Google Chrome Google Chrome v.55.0.2883.87 m

Source code

 Nama Fungsi Di Web:

Nama Fungsi di Web Pembuat

Home Page 1. Ninuk Dirgantari

2. Muhammad Arya Nugraha 3. Nur Zaeni Saefudin

4. Adit Purnomo Aji 5. Dzikri Nandi Asa 6. Achmad Sudrajat

(10)

7. Muhammad Alfian Fandi

3. Pembagian kerja

1. Alfian, Ahmad, Adit menyelesaikan Portal berita.

2. Alfian, Zaeni Menyelesaikan Pembuatan input dan output berita. 3. Dzikri, Arya, Menyelesaikan Pembuatan secara teknis.

(11)

BAB III

(12)

A. Pendadaran program

Untuk cara kerja program Portal Web Berita berikut kami jelaskan alurnya :

1. Admin akan melakukan login sebagai langkah awal untuk membuat berita, buka web yang telah kami buat

2. Klik Home Page untuk melihat dan menentukan berita dan memasukkan berita yang akan dipilih/ di unggah

3. Klik Support untuk melihat siapa saja yang sudah membantu dalam pembuatan Wet ini

4. Klik About Us untuk melihat daftar nama kelompok beserta misi kita.

5. Blog untuk menampilkan daftar komentar yang terdapat pada berita yang telah diunggah yang bertujuan untuk memudahkan kita dalam memantau ataupun sekedar membalas komenat tersebut

6. Contact Us berisi tentang isi laporan para pembaca yang nantinya akan dikirim ke data server kami

7. Pada Home pag di sidebar menu terdapat sub sidebar tambah berita yang berfungsi sebagai penambah berita yang ingin diunggah

B. Source Code (Terlampir)

C. Desain awal

(13)

2. Desain template

(14)

D. Screen Shot Menu

1. Menu

(15)
(16)

b. Support

(17)

d. Blog

(18)
(19)
(20)

BAB IV PRESENTATION

A. Kampus

a. Ruang F.2.5 Kampus I Universitas Teknologi Yogyakarta (UTY) B. Fakultas

(21)

C. Tingkatan

a. Semester III

BAB V

CERITA PRESENTASI

Cerita dari presentasi kami merupakan sebuah pengalaman menarik yang kami temui dalam perjalanan kami sebagai mahasiswa Universitas Teknologi Yogyakarta.

Presentasi untuk tugas proyek ini kami diberikan tugas bahwa kami harus mempresentasikan hasil tugas proyek kami sebagai keharusan bahasa pemenuhan presentasi kami sebagai pembuat program dihadapan para pembeli program, ini merupakan sebuah tantangan yang sangat jarang dan langka, jelasnya tantangan ini membuat kita lebih memaksakan diri untuk belajar, mengerti, lalu bisa dengan hal yang tadinya kami kurang bisa, jika kita tidak bisa mempresentasikan tugas kami dengan memuaskan ini bukan merupakan kerugian dan kemaluan dalam satu pihak, melainkan pihak dari kelompok kami sendiri sebagai nama kelompok kami sebagai pembuat web.

Dengan sebegitu kuat rasanya untuk lebih membanggakan kelompok kami di hadapan para teman, kami berusaha sekuat mungkin, lalu saat hari mulainya untuk mempresentasikan tugas akhir kami, dengan begitu antusias dan begitu semangat kami berangkat untuk

mempresentasikan tugas akhir kami, dengan sangat lantang dan bangganya kami membawa logo Universitas Tenologi Yogyakarta lalu menceritakan dan menjelaskan yang perlu kami jelaskan dengan menggunakan bahasa sopan yang memang telah kami siapkan.

(22)

Setelah selesai, kami pulang dengan rasa senang, bahagia, dan bangga tentunya karna tetap bisa.

(23)

BAB VII PENUTUP

Allhamdulilah, sangat menyenangkan bagi kami untuk melakukan tugas proyek ini sebagai tantangan bagi diri kami sendriri mengani seberapa tangguhkah kami di hadapan para mahasiswa

Dalam Tugas Proyek ini kami belajar mengenai berbagai macam kerjasama baik sedih maupun senang saat kami sedang mengerjakan pun semua terasa terpadu dan kami tanggung bersama, beraneka kritik, saran, pujian kami dapatkan dari hasil presentasi kami.

Saat kami dalam presentasi, kami merasakan bahwa kami membawa image dan nama baik dari kami, sehingga dengan sekuat tenaga dan sebisa mungkin kami berpresentasi di depan puluhan mahasiswa di hadapan kami dan kami mempresentasikan tugas proyek ini dengan bahasa sopan yang memang sebagai syarat utama tugas proyek ini.

Dari Segala Jalan dan halangan yang kami hadapi, allhamdulilah kami dapat menyelesaikan tugas proyek dan menyerahkan laporan tugas proyek ini dengan penuh bangga atas kerja kami dan bantuan dari berbagai pihak yang memberikan saran yang bersifat membangun.

(24)

Dan kami sangatlah menerima kritik dan saran yang bersifat membangun dari berbagai pihak untuk saling memperbaiki satu dengan yang lainnya.

LAMPIRAN

1. Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Kelompok 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

(25)

<script type="text/javascript" src="js/coin-slider.min.js"></script> </head>

<body>

<div class="main"> <div class="header">

<div class="header_resize"> <div class="rss">

<p><a href="#">Subscribe to</a> <a href="#"><img src="images/rss.gif" width="16" height="16" alt="" /></a></p> </div>

<div class="logo">

<h1><a href="index.php">Techno<span> News</span></a></h1>

</div>

<div id="profile">

<b id="welcome">Selamat Datang : <i> </i></b>

<b id="logout"><a href="logout.php">Log Out</a></b> </div>

<div class="clr"></div> <div class="slider">

<div id="coin-slider"> <a href="#"><img

src="images/wck1.jpg" width="960" height="360" alt=""

/><span>keseluruhan sarana untuk menyediakan barang-barang yang diperlukan bagi kelangsungan dan kenyamanan hidup

(26)

matematika, sains, dan berbagai seni untuk faedah kehidupan seperti yang dikenal saat ini.</span></a> <a href="#"><img

src="images/wck3.jpg" width="960" height="360" alt=""

/><span>teknologi berasal dari perpaduan dua buah akar kata yaitu ‘techne’ atau ‘techton’ dan ‘logos’, keduanya berasal dari bahasa Yunani. Techton atau techne berarti keterampilan dan kata ini

memiliki padanan dalam bahasa sansekerta berarti taksan dan dalam bahasa Arab berarti taskhir serta dalam bahasa latin berarti tegere. dan logos tentu saja berarti ilmu. Sehingga secara sederhana teknologi dapat diartikan sebagai ilmu tentang keterampilan.</span></a> </div> <div class="clr"></div>

</div>

<div class="clr"></div> <div class="searchform">

<form id="formsearch" name="formsearch" method="post" action="#">

<span>

<input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Search our ste:" type="text" />

</span>

<input name="button_search" src="images/search.gif" class="button_search" type="image" />

</form> </div>

(27)

<ul>

<li class="active"><a href="index.php"><span>Home Page</span></a></li>

<li><a href="support.html"><span>Support</span></a></li> <li><a href="about.html"><span>About Us</span></a></li> <li><a href="blog.html"><span>Blog</span></a></li> <li><a href="contact.html"><span>Contact

Us</span></a></li> </ul>

</div>

<div class="clr"></div> </div>

</div>

<div class="content">

<div class="content_resize"> <div class="mainbar">

<div class="container-fluid"> <div class="row-fluid">

(28)

if(empty($_GET['link'])) <br></br>

</div>

<p class="pages">&nbsp;&nbsp;&nbsp;<span></span> <a ></a> <a ></a></p>

</div>

<div class="sidebar"> <div class="gadget">

<h2 class="star"><span>Sidebar</span> Menu</h2> <div class="clr"></div>

<ul class="sb_menu">

<li><a href="index.php">Home</a></li>

(29)

<li><a href="#">Style Demo</a></li>

<h2 class="star"><span>Kategori</span></h2> <div class="clr"></div>

<ul class="ex_menu"> <li><a

href="smartphone.html">Smartphone</a></li> <li><a href="laptop.html">Laptop</a></li> <li><a href="#">Hardware</a></li>

<div class="clr"></div> </div>

</div>

<br></br> <br></br>

(30)

<div class="fbg_resize"> <div class="col c1">

<h2><span>Image</span> Gallery</h2>

<a href="read.html"><img src="sam.jpg" width="75" height="75" alt="" class="gal" /></a>

<a href="#"><img src="pix.jpg" width="75" height="75" alt="" class="gal" /></a>

<a href="#"><img src="images/gal3.jpg" width="75" height="75" alt="" class="gal" /></a>

<a href="#"><img src="images/gal4.jpg" width="75" height="75" alt="" class="gal" /></a>

<a href="#"><img src="images/gal5.jpg" width="75" height="75" alt="" class="gal" /></a>

<a href="#"><img src="images/gal6.jpg" width="75" height="75" alt="" class="gal" /></a>

</div>

<div class="col c2">

<h2><span>Services</span> Overview</h2>

<p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet lacus sagittis posuere cursus vitae nunc.Etiam

venenatis, turpis at eleifend porta, nisl nulla bibendum justo.</p> <ul class="fbg_ul">

<li><a href="#">Lorem ipsum dolor labore et dolore.</a></li> <li><a href="#">Excepteur officia deserunt.</a></li>

(31)

</div>

<div class="col c3">

<h2><span>Contact</span> us</h2>

<p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui.</p>

<p class="contact_info"> <span>Address:</span> 1458 TemplateAccess, INA<br />

<span>Telephone:</span> +123-1234-5678<br /> <span>FAX:</span> +458-4578<br />

<span>Others:</span> +301 - 0125 - 01258<br />

<span>E-mail:</span> <a href="#">[email protected]</a> </ p>

</div>

<div class="clr"></div> </div>

</div>

<div class="footer">

<div class="footer_resize">

<p class="lf">Copyright &copy; <a href="#">Domain Name</a>. All Rights Reserved</p>

<p class="rf">Design by <a target="_blank" href="#">Kelompok 2</a></p>

<div style="clear:both;"></div> </div>

(32)

</div> </body> </html>

2. Index2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Wicak</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/coin-slider.css" /> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/cufon-aller-bi.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script>

<script type="text/javascript" src="js/coin-slider.min.js"></script> </head>

<body>

(33)

<div class="header_resize"> <div class="rss">

<p><a href="#">Subscribe to</a> <a href="#"><img src="images/rss.gif" width="16" height="16" alt="" /></a></p> </div>

<div class="logo">

<h1><a href="index.html">Techno<span> News</span></a></h1>

</div>

<div id="profile">

<b id="welcome">Selamat Datang : <i><?php echo $login_session; ?></i></b>

<b id="logout"><a href="logout.php">Log Out</a></b> </div>

<div class="clr"></div> <div class="slider">

<div id="coin-slider"> <a href="#"><img

src="images/wck1.jpg" width="960" height="360" alt=""

/><span>keseluruhan sarana untuk menyediakan barang-barang yang diperlukan bagi kelangsungan dan kenyamanan hidup

manusia.</span></a> <a href="#"><img src="images/wck2.jpg" width="960" height="360" alt="" /><span>teknologi adalah terapan matematika, sains, dan berbagai seni untuk faedah kehidupan seperti yang dikenal saat ini.</span></a> <a href="#"><img

src="images/wck3.jpg" width="960" height="360" alt=""

(34)

‘techne’ atau ‘techton’ dan ‘logos’, keduanya berasal dari bahasa Yunani. Techton atau techne berarti keterampilan dan kata ini

memiliki padanan dalam bahasa sansekerta berarti taksan dan dalam bahasa Arab berarti taskhir serta dalam bahasa latin berarti tegere. dan logos tentu saja berarti ilmu. Sehingga secara sederhana teknologi dapat diartikan sebagai ilmu tentang keterampilan.</span></a> </div> <div class="clr"></div>

</div>

<div class="clr"></div> <div class="searchform">

<form id="formsearch" name="formsearch" method="post" action="#">

<span>

<input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Search our ste:" type="text" />

</span>

<input name="button_search" src="images/search.gif" class="button_search" type="image" />

</form> </div>

<div class="menu_nav"> <ul>

<li class="active"><a href="index.html"><span>Home Page</span></a></li>

(35)

<li><a href="about.html"><span>About Us</span></a></li> <li><a href="blog.html"><span>Blog</span></a></li> <li><a href="contact.html"><span>Contact

Us</span></a></li> </ul>

</div>

<div class="clr"></div> </div>

</div>

<div class="content">

<div class="content_resize"> <div class="mainbar"> <div class="article">

<h2><span>ROG G701, Gaming Laptop Pertama Asus</span>dengan GeForce 1080</h2>

<p class="infopost">Posted <span class="date">on 10 dec 2017</span> by <a href="#">Admin</a> &nbsp;&nbsp;|

&nbsp;&nbsp; Filed under <a href="#">templates</a>, <a href="#">internet</a> <a href="#" class="com">Comments <span>11</span></a></p>

<div class="clr"></div>

<div class="img"><img src="asuss.jpg" width="179" height="200" alt="" class="fl" /></div>

(36)

<p>Seakan tak ingin kalah dengan rekan senegaranya Acer yang memperkenalkan gaming laptop dengan kartu grafis GeForce GTX 1080, Asus pun memperkenalkan ROG G701VI.

ROG G701VI merupakan seri gaming laptop pertama Asus yang menggunakan kartu grafis terbaru milik Nvidia tersebut.</p>

<p class="spec"><a href="read.html" class="rm">Read more...</a></p> Intel Kaby Lake dan Pengolah Grafis dari </span> Nvida</h2> <p class="infopost">Posted <span class="date">on 29 aug 2016</span> by <a href="#">Admin</a> &nbsp;&nbsp;|

&nbsp;&nbsp; Filed under <a href="#">templates</a>, <a href="#">internet</a> <a href="#" class="com">Comments <span>7</span></a></p>

<div class="clr"></div>

<div class="img"><img src="asus.jpg" width="179" height="200" alt="" class="fl" /></div>

<div class="post_content">

(37)

telah menggunakan prosesor Intel Skylake saat itu. Namun tidak sampai satu tahun lamanya, akhirnya Asus memutuskan untuk memperbarui laptop tersebut dengan jeroan yang lebih fresh. </p> <p class="spec"><a href="read2.html" class="rm">Read more...</a></p>

</div>

<div class="clr"></div> </div>

<p class="pages"><small>Page 2 of 2

&nbsp;&nbsp;&nbsp;</small> <a href="index.html">1</a> <span>2</span> <a href="#">&raquo;</a></p>

</div>

<div class="sidebar"> <div class="gadget">

<h2 class="star"><span>Sidebar</span> Menu</h2> <div class="clr"></div>

<ul class="sb_menu">

(38)

<h2 class="star"><span>Kategori</span></h2> <div class="clr"></div>

<ul class="ex_menu"> <li><a

href="smartphone.html">Smartphone</a></li> <li><a href="laptop.html">Laptop</a></li> <li><a href="#">Hardware</a></li>

<div class="clr"></div> </div>

</div>

<div class="fbg">

<div class="fbg_resize"> <div class="col c1">

<h2><span>Image</span> Gallery</h2>

<a href="#"><img src="sam.jpg" width="75" height="75" alt="" class="gal" /></a>

<a href="#"><img src="pix.jpg" width="75" height="75" alt="" class="gal" /></a>

(39)

<a href="#"><img src="images/gal4.jpg" width="75" height="75" alt="" class="gal" /></a>

<a href="#"><img src="images/gal5.jpg" width="75" height="75" alt="" class="gal" /></a>

<a href="#"><img src="images/gal6.jpg" width="75" height="75" alt="" class="gal" /></a>

</div>

<div class="col c2">

<h2><span>Services</span> Overview</h2>

<p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet lacus sagittis posuere cursus vitae nunc.Etiam

venenatis, turpis at eleifend porta, nisl nulla bibendum justo.</p> <ul class="fbg_ul">

<li><a href="#">Lorem ipsum dolor labore et dolore.</a></li> <li><a href="#">Excepteur officia deserunt.</a></li>

<li><a href="#">Integer tellus ipsum tempor sed.</a></li> </ul>

</div>

<div class="col c3">

<h2><span>Contact</span> us</h2>

<p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui.</p>

<p class="contact_info"> <span>Address:</span> 1458 TemplateAccess, INA<br />

(40)

<span>FAX:</span> +458-4578<br />

<span>Others:</span> +301 - 0125 - 01258<br />

<span>E-mail:</span> <a href="#">[email protected]</a> </ p>

</div>

<div class="clr"></div> </div>

</div>

<div class="footer">

<div class="footer_resize">

<p class="lf">Copyright &copy; <a href="#">Domain Name</a>. All Rights Reserved</p>

<p class="rf">Design by <a target="_blank" href="#">Kelompok 2</a></p>

<div style="clear:both;"></div> </div>

</div> </div> </body> </html>

3. Indo.php <?php

(41)

if(isset($_SESSION['login_user'])){ header("location: index.php"); }

?>

<!DOCTYPE html> <html>

<head>

<title> Login Site </title>

<!-- Skrip CSS-->

<link rel="stylesheet" href="style.css"/>

</head> <body>

<div class="container">

<div class="main">

<form action="" method="post">

<h2>Login Techno News</h2><hr/>

<label>Username :</label>

<input id="name" name="username" placeholder="username" type="text">

<label>Password :</label>

(42)

<input type="submit" name="submit" id="submit" value="Login">

</form> </div> </div>

</body> </html>

4. About.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Wicak | About</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/coin-slider.css" /> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/cufon-aller-bi.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script>

(43)

<body>

<div class="main"> <div class="header">

<div class="header_resize"> <div class="rss">

<p><a href="#">Subscribe to</a> <a href="#"><img src="images/rss.gif" width="16" height="16" alt="" /></a></p> </div>

<b id="welcome">Selamat Datang : <i><?php echo $login_session; ?></i></b>

<b id="logout"><a href="logout.php">Log Out</a></b> </div>

<div class="clr"></div> <div class="slider">

<div id="coin-slider"> <a href="#"><img

src="images/wck1.jpg" width="960" height="360" alt=""

/><span>keseluruhan sarana untuk menyediakan barang-barang yang diperlukan bagi kelangsungan dan kenyamanan hidup

(44)

yang dikenal saat ini.</span></a> <a href="#"><img src="images/wck3.jpg" width="960" height="360" alt=""

/><span>teknologi berasal dari perpaduan dua buah akar kata yaitu ‘techne’ atau ‘techton’ dan ‘logos’, keduanya berasal dari bahasa Yunani. Techton atau techne berarti keterampilan dan kata ini

memiliki padanan dalam bahasa sansekerta berarti taksan dan dalam bahasa Arab berarti taskhir serta dalam bahasa latin berarti tegere. dan logos tentu saja berarti ilmu. Sehingga secara sederhana teknologi dapat diartikan sebagai ilmu tentang keterampilan.</span></a> </div> <div class="clr"></div>

</div>

<div class="clr"></div> <div class="searchform">

<form id="formsearch" name="formsearch" method="post" action="#">

<span>

<input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Search our ste:" type="text" />

</span>

<input name="button_search" src="images/search.gif" class="button_search" type="image" />

</form> </div>

(45)

<li><a href="index.html"><span>Home Page</span></a></li> <li><a href="support.html"><span>Support</span></a></li> <li class="active"><a href="about.html"><span>About Us</span></a></li>

<li><a href="blog.html"><span>Blog</span></a></li> <li><a href="contact.html"><span>Contact

Us</span></a></li> </ul>

</div>

<div class="clr"></div> </div>

</div>

<div class="content">

<div class="content_resize"> <div class="mainbar"> <div class="article">

<h2><span>About to</span> Work Grup</h2> <div class="clr"></div>

<p><strong>ini adalah sebagian tugas akhir dari kami dalam matakuliah pemrograman web yang mana diajar oleh bpk. buyung, .</ strong></p>

<p><pre>Kelompok ini terdiri dari :

(46)

3. NUR ZAENI SAEFUDIN

<h2><span>Our</span> Mission</h2> <div class="clr"></div>

<p><strong>Tujuan dari kelompok ini adalah untuk memenuhi sebagian tugas yang diberikan oleh dosen kepada kami para

mahasiswa SI 2015.</strong></p>

<p>Dalam Pembuatan Website ini kami mengambil dari beberapa reverensi dari salah satu website yang kami dapati dari search di google, lalu kami melakukan sebagian diskusi agar website ini lebih eisien dan efektif</p>

<p>Reverensi yang kami kumpulkan cukup banyak, mulai dari buku perpustakaan sampai artikel yang di post dari salah satu website dan blog orang lain.</p>

</div> </div>

(47)

<div class="gadget">

<h2 class="star"><span>Sidebar</span> Menu</h2> <div class="clr"></div>

<ul class="sb_menu">

<li><a href="#">Home</a></li>

<li><a href="#">TemplateInfo</a></li> <li><a href="#">Style Demo</a></li>

<h2 class="star"><span>Sponsors</span></h2> <div class="clr"></div>

(48)

<li><a href="#">Donec mattis</a><br /> purus nec placerat bibendum</li>

</ul> </div> </div>

<div class="clr"></div> </div>

</div>

<div class="fbg">

<div class="fbg_resize"> <div class="col c1">

<h2><span>Image</span> Gallery</h2>

<a href="#"><img src="images/gal1.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img

src="images/gal2.jpg" width="75" height="75" alt="" class="gal" /></ a> <a href="#"><img src="images/gal3.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal4.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal5.jpg" width="75" height="75" alt="" class="gal" /></ a> <a href="#"><img src="images/gal6.jpg" width="75" height="75" alt="" class="gal" /></a> </div>

<div class="col c2">

<h2><span>Services</span> Overview</h2>

<p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet lacus sagittis posuere cursus vitae nunc.Etiam

(49)

<ul class="fbg_ul">

<li><a href="#">Lorem ipsum dolor labore et dolore.</a></li> <li><a href="#">Excepteur officia deserunt.</a></li>

<li><a href="#">Integer tellus ipsum tempor sed.</a></li> </ul>

</div>

<div class="col c3">

<h2><span>Contact</span> Us</h2>

<p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui.</p>

<p class="contact_info"> <span>Address:</span> 1458 TemplateAccess, USA<br />

<span>Telephone:</span> +123-1234-5678<br /> <span>FAX:</span> +458-4578<br />

<span>Others:</span> +301 - 0125 - 01258<br />

<span>E-mail:</span> <a href="#">[email protected]</ a> </p>

</div>

<div class="clr"></div> </div>

</div>

<div class="footer">

<div class="footer_resize">

(50)

<p class="rf">Design by <a target="_blank"

href="http://www.dreamtemplate.com/">DreamTemplate</a></p> <div style="clear:both;"></div>

</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Toplax | Blog</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

(51)

<body>

<div class="main"> <div class="header">

<div class="header_resize"> <div class="rss">

<p><a href="#">Subscribe to</a> <a href="#"><img src="images/rss.gif" width="16" height="16" alt="" /></a></p> </div>

<div class="logo">

<h1><a href="index.html">Top<span>lax</span></a></h1> </div>

<div id="profile">

<b id="welcome">Selamat Datang : <i><?php echo $login_session; ?></i></b>

<b id="logout"><a href="logout.php">Log Out</a></b> </div>

<div class="clr"></div> <div class="slider">

<div id="coin-slider"> <a href="#"><img src="images/wck1.jpg" width="960" height="360" alt="" /><span>keseluruhan sarana untuk menyediakan barang-barang yang diperlukan bagi kelangsungan dan kenyamanan hidup manusia.</span></a> <a href="#"><img

src="images/wck2.jpg" width="960" height="360" alt=""

(52)

alt="" /><span>teknologi berasal dari perpaduan dua buah akar kata yaitu ‘techne’ atau ‘techton’ dan ‘logos’, keduanya berasal dari bahasa Yunani. Techton atau techne berarti keterampilan dan kata ini

memiliki padanan dalam bahasa sansekerta berarti taksan dan dalam bahasa Arab berarti taskhir serta dalam bahasa latin berarti tegere. dan logos tentu saja berarti ilmu. Sehingga secara sederhana teknologi dapat diartikan sebagai ilmu tentang keterampilan.</span></a> </div> <div class="clr"></div>

</div>

<div class="clr"></div> <div class="searchform">

<form id="formsearch" name="formsearch" method="post" action="#">

<span>

<input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Search our ste:" type="text" />

</span>

<input name="button_search" src="images/search.gif" class="button_search" type="image" />

</form> </div>

<div class="menu_nav"> <ul>

(53)

<li><a href="about.html"><span>About Us</span></a></li> <li class="active"><a

href="blog.html"><span>Blog</span></a></li> <li><a href="contact.html"><span>Contact Us</span></a></li>

</ul> </div>

<div class="clr"></div> </div>

</div>

<div class="content">

<div class="content_resize"> <div class="mainbar"> <div class="article">

<h2><span>A Blog</span> Entry</h2> <div class="clr"></div>

<p>Posted by <a href="#">Admin</a>

<span>&nbsp;&bull;&nbsp;</span> Filed under <a href="#">templates</a>, <a href="#">internet</a></p>

(54)

tristique orci porttitor ipsum. Lorem ipsum dolor sit amet,

consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. </p>

<p>Tagged: <a href="#">orci</a>, <a href="#">lectus</a>, <a href="#">varius</a>, <a href="#">turpis</a></p>

<p><a href="#"><strong>Comments (3)</strong></a> <span>&nbsp;&bull;&nbsp;</span> May 27, 2010

<span>&nbsp;&bull;&nbsp;</span> <a href="#"><strong>Edit</strong></a></p> </div>

<div class="article">

<h2><span>3</span> Responses</h2> <div class="clr"></div>

<div class="comment"> <a href="#"><img

src="images/userpic.gif" width="40" height="40" alt="" class="userpic" /></a>

<p><a href="#">admin</a> Says:<br /> April 20th, 2009 at 2:17 pm</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.</p>

</div>

<div class="comment"> <a href="#"><img

src="images/userpic.gif" width="40" height="40" alt="" class="userpic" /></a>

(55)

April 20th, 2009 at 3:21 pm</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>

</div>

<div class="comment"> <a href="#"><img

src="images/userpic.gif" width="40" height="40" alt="" class="userpic" /></a>

<p><a href="#">admin</a> Says:<br /> April 20th, 2009 at 2:17 pm</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.</p>

</div> </div>

<div class="article">

<h2><span>Leave a</span> Reply</h2> <div class="clr"></div>

(56)

<input id="email" name="email" class="text" />

<h2 class="star"><span>Sidebar</span> Menu</h2> <div class="clr"></div>

<ul class="sb_menu">

(57)

<li><a href="#">TemplateInfo</a></li>

<h2 class="star"><span>Sponsors</span></h2> <div class="clr"></div>

(58)

<div class="clr"></div> </div>

</div>

<div class="fbg">

<div class="fbg_resize"> <div class="col c1">

<h2><span>Image</span> Gallery</h2>

<a href="#"><img src="images/gal1.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img

src="images/gal2.jpg" width="75" height="75" alt="" class="gal" /></ a> <a href="#"><img src="images/gal3.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal4.jpg" width="75" height="75" alt="" class="gal" /></a> <a href="#"><img src="images/gal5.jpg" width="75" height="75" alt="" class="gal" /></ a> <a href="#"><img src="images/gal6.jpg" width="75" height="75" alt="" class="gal" /></a> </div>

<div class="col c2">

<h2><span>Services</span> Overview</h2>

<p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet lacus sagittis posuere cursus vitae nunc.Etiam

venenatis, turpis at eleifend porta, nisl nulla bibendum justo.</p> <ul class="fbg_ul">

<li><a href="#">Lorem ipsum dolor labore et dolore.</a></li> <li><a href="#">Excepteur officia deserunt.</a></li>

(59)

</div>

<div class="col c3">

<h2><span>Contact</span> Us</h2>

<p>Nullam quam lorem, tristique non vestibulum nec, consectetur in risus. Aliquam a quam vel leo gravida gravida eu porttitor dui.</p>

<p class="contact_info"> <span>Address:</span> 1458 TemplateAccess, USA<br />

<span>Telephone:</span> +123-1234-5678<br /> <span>FAX:</span> +458-4578<br />

<span>Others:</span> +301 - 0125 - 01258<br />

<span>E-mail:</span> <a href="#">[email protected]</ a> </p>

</div>

<div class="clr"></div> </div>

</div>

<div class="footer">

<div class="footer_resize">

<p class="lf">Copyright &copy; <a href="#">Domain Name</a>. All Rights Reserved</p>

<p class="rf">Design by <a target="_blank"

href="http://www.dreamtemplate.com/">DreamTemplate</a></p> <div style="clear:both;"></div>

(60)

Referensi

Dokumen terkait

HTML adalah suatu dokumen teks yang mudah dimengerti disbanding bahasa pemrograman lainnya dan juga merupakan sebuah bahasa markah yang digunakan untuk membuat

Tahap mempresentasikan tugas proyek yang dilakukan kelompok 2 sangat baik dan pemaparannya secara sistematis serta bahasa yang dipergunakanpun juga mudah

Menurut pandangan kami, tugas akhir ini sudah memadahi dari segi kualitas sebagai pemenuhan persyaratan kelulusan mata kuliah Tugas Akhir dan salah satu

LAPORAN MANAJEMEN TUGAS PROYEK PEMBUATAN APLIKASI E-RAPORT SD UNGGULAN AISYIYAH BANTUL Oleh : Abiema Febrian Nugraha 1700018148 Adhymas Fajar Sudrajad 1700018167 Dimas Restu

KATA PENGANTAR Assalamu’alaikum Wr.Wb Segala puji bagi Alloh S.W.T yang telah memberikan rahmat dan hidayahnya kepada kita sehingga Laporan Tugas Proyek “E-prints Perpustakaan

Rekan Setim yang berusaha dan berjuang keras secara bersama dan kompak menyelesaikan tugas tugasnya sehingga menghasilkan proyek ini Tim Penyusun menyadari Laporan Tugas Proyek ini

LAPORAN TUGAS PROYEK PEMBUATAN SISTEM INFORMASI PEMBAYARAN INFAK MI MUHAMMADIYAH CIPARI Lalu Sabrian Ganata 1500018048 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS

Laporan tugas proyek ini disusun guna melengkapi persyaratan dalam menyelesaikan Mata Kuliah Manajemen Tugas Proyek di Program Studi Teknik Informatika Universitas Ahmad Dahlan