WEB INFORMASI UNIVERSITAS

“CEMDIKIA ULUM”

DISUSUN OLEH:

1. DADANG SUHARDI (12183994)

2. AHMAD AFIF SHOIDANI (12180223)
3. TIARA ROUDHOTUL P. (12180699)
4. FITRI TRIANA P. (12181030)
5. IRMA ENDAH (12180601)
6. DWI AFIYANTI RAMADHANI (12184402)

UNIVERSITAS BINA SARANA INFORMATIKA

KAMPUS UBSI CIKARANG

2019
 KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Allah swt. Karena atas segala
berkah, taufik dan hidayahNya kami dapat menyelesaikan laporan project
UAS mata kuliah Web Programming 1.

Tugas ini disusun untuk melengkapi dan memenuhi salah satu tugas mata
kuliah Web programming 1 semester 2. Dalam makalah yang kami buat ini,
kami mendapatkan judul “WEB INFORMASI UNIVERSITAS”.

Dengan segala kerendahan hati kami sebagai anggota kelompok,

menyadari bahawa penulisan di dalam makalah ini masih jauh dari
kesempurnaan dan tidak luput dari kesalahan. Hal ini mengingat
kemampuan dan pengalaman kami serta pengetahuan yang kami miliki
sangat terbatas untuk menghasilkan karya tulis yang bsempurna. Oleh
karena itu saran dan kritik yang membangun dari semua pihak sangat kami
harapkan.

Penulisan makalah ini tidak akan terwujud tanpa bantuan dari berbagai
pihak, oleh karena itu kami mengucapkan terima kasih kepada dosen kami
Bapak Dian Ardhiansyah M. Kom dan seluruh anggota yang telah
membantu penulisan tugas project UAS.

Cikarang, 27 Juni 2019

Penulis

i
 DAFTAR ISI

Kata Pengantar ........................................................................................ i

Daftar Isi ................................................................................................... ii
BAB I PENDAHULUAN ...........................................................................1
A. Latar Belakang ............................................................................1
B. Rumusan Masalah .......................................................................1
C. Tujuan Penulisan ………………………………………………1

BAB II PEMBAHASAN ...........................................................................2

2.1 Tema Project ...........................................................................2

2.2 Landasan Teori .......................................................................2

2.3 Struktur Navigasi ...................................................................12

2.4 Syntax Program ....................................................................12

2.5 Tampilan Halaman Web .......................................................22

BAB III PENUTUP .................................................................................27

3.1 Kesimpulan ...........................................................................27

3.2 Saran .....................................................................................27

ii
 BAB I

PENDAHULAN

A. Latar Belakang

Perkembangan internet dan network akhir-akhir ini telah membuat institusi

pendidikan khususnya perguruan tinggi membutuhkan sebuah situs web
untuk mempermudah para mahasiswanya dalam memperoleh berbagai
macam informasi mengenai kampus. Salah satu media yang dapat dipakai
untuk menjembatani hubungan antara mahasiswa dengan pihak perguruan
tinggi adalah internet khususnya situs web.
Pembuatan sebuah situs web tidak bisa terlepas dengan bahasa
pemrograman, dalam hal ini penulis menggunakan PHP dan CSS sebagai
bahasa scripting. PHP dan CSS adalah pasangan bahasa scripting yang
banyak diminati akhir-akhir ini. Ketangguhan, jaminan keamanan yang
tinggi, dan kemudahan mempelajari membuat keduanya banyak dipilih
untuk digunakan.

B. Rumusan Masalah

Berdasarkan latar belakang masalah dan hubungan dengan pemilihan judul,

maka Penulis merumuskan pokok permasalahan : Bagaimana membuat
sebuah aplikasi website informasi untuk kemudahan para mahasiswa dan
dosen mengakses berbagai informasi kegiatan atau yang lainnya mengenai
Universitas Cendekia Ulum.

C. Tujuan Penulisan

Tujuan pembuatan projrct akhir ini adalah mendisain dan

mengimplementasikan sebuah situs web untuk almamater perguruan tinggi.

1
 BAB II
PEMBAHASAN

2.1 Tema Project

“Web Informasi Universitas Cendikia Ulum”

2.2 Landasan teori

A. Definisi web informasi dan data

Website atau situs dapat diartikan sebagai kumpulan halaman yang

menampilkan informasi data teks, data gambar diam atau gerak, data
animasi suara, video dan atau gabungan dari semuanya. Baik yang
bers`ifat statis maupun dinamis yang membentuk satu rangkaian
bangunan yang saling terkait dimana masing – masing dihubungkan
dengan jaringan – jaringan halaman (hyperlink).
(http://www.baliorange.web.id). Informasi merupakan hasil
pengolahan data sehingga menjadi bentuk yang penting bagi
penerimanya dan mempunyai kegunaan sebagai dasar dalam
pengambilan keputusan yang dapat dirasakan akibatnya secara
langsung saat itu juga atau secara tidak langsung pada saat mendatang
( Sutanta, 2004 ). Data didefinisikan sebagai bahan keterangan tentang
kejadian – kejadian nyata atau fakta – fakta yang dirumuskan dalam
sekelompok lambing tertentu yang tidak acak menunjukkan jumlah,
tindakan dan hal. Data dapat berupa catatan – catatan dalam kertas,
buku, atau tersimpan sebagai file dalam baris data (Sutanta, 2004 ).

B. Internet
Internet adalah suatu jaringan komputer yang satu dengan yang lain
saling terhubung untuk keperluan komunikasi dan informasi. Sebuah
komputer satu jaringan internet dapat berada dimana saja atau bahkan
di seluruh Indonesia. Sering juga Internet diartikan sebagai jaringan
komputer di seluruh dunia yang berisikan informasi dan sebagai sarana
komunikasi data yang berupa suara, gambar, video dan juga teks.

2
C. HTML (Hypertext Markup Language)
Hypertext Markup Language (HTML) adalah sebuah bahasa untuk
menampilkan konten di web. HTML sendiri dalah bahasa
pemrograman yang bebas, artinya tidak dimiliki oleh siapapun,
pengembangannya dilakukan oleh banyak orang di banyak negara dan
biasa dikatakan sebagai bahasa yang di kembangkan bersama-sama
secara global.
Sebuah dokumen HTML sendiri adalah dokumen text yang dapat
diedit oleh editor text apapun. Dokumen HTML punya beberapa
elemen yang dikelilingi oleh tag-text yang dimulai dengan simbol <
dan berakhiran dengan sebuah symbol >.

1. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yag diikuti dengan isi
elemen dan tag akhir.
Jenis-jenis tag dalam HTML :
* Tag Dasar

* Tag Pemformatan

3
* Tag Computer Output

* Tag Cititation, Quotation dan Definition

* Tag Link

* Tag Image

4
 * Tag untuk List

D. PHP ( Personal Home Page )

PHP adalah bahasa program yang berbentuk script yang diletakkan
didalam server web dan hanya dapat berjalan pada server yang
hasilnya dapat ditampilkan pada klien. PHP merupakan bahasa standar
yang digunakan dalam dunia website. Interpreter PHP dalam
mengakses kode PHP pada sisi server disebut server side. PHP
diciptakan dari ide Rasmus Lerdof yang membuat sebuah script perl.
Script tersebut sebenarnya dimaksudkan untuk digunakan sebagai
program untuk dirinya sendiri. Akan tetapi, kemudian dikembangkan
lagi sehingga menjadi sebuah bahasa yang disebut Personal Home
Page.

* Jenis-jenis Tag PHP

* Dasar-dasar PHP

1. Variabel

Variabel merupakan sebuah istilah yang menyatakan

sebuah tempat yang menampung nilai-nilai tertentu dimana di
dalamnya bisa diubah-ubah. Variabel penting karena tanpa adanya
variabel tidak bisa menyimpan nilai tertentu untuk diolah.

Variabel ditandai dengan adanya tanda dolar ($) yang kemudian

bisa diikuti dengan angka, huruf, dan underscore. Namun variabel
tidak bisa mengandung spasi. Berikut ini contoh pendefinisian
variabel.

5
 $nama

$no_telp

$_pekerjaan

2. Tipe Data

Berbeda dengan bahasa pemrograman lain, variabel di PHP

lebih fleksibel. Ada 6 tipe data dasar yang dapat diakomodasikan
di PHP seperti :

3. Konstanta

Selain variabel, sebuah program umumnya juga

memungkinkan adanya konstanta. Konstanta fungsinya sama
seperti variabel namun nilainya statis/konstan dan tidak bisa
diubah. Cara untuk mendefinisikan konstanta adalah :

Define (“NAMA_KONSTANTA”, nilai_konstanta);

4. Komentar

Program merupakan kegiatan menuliskan bahasa yang

dipahami oleh mesin. Walaupun bahasa yang digunakan adalah
bahasa tingkat tinggi, namun text masih tidak semudah dipahami
oleh bahasa biasa. Untuk itu kita bisa menggunakan komentar.

6
E. Pengenalan Form

1. Komponen Form

Sebuah website dinamis seringkali memerlukan interaksi

antara browser clien dan server bisa berupa pemasukan data teks,
angka, atau upload file untuk diproses oleh server. Untuk
mewadahi suatu data yang dikirimkan oleh browser clien,
dibutuhkan adanya FORM HTML. Penggunaan form misalnya
untuk pendaftaran keanggotaan, pemasukan kode kartu kredit,
login user, transaksi pembelanjaan, dan upload file.
Dalam FORM HTML terdapat beberapa komponen yang bisa
digunakan, antara lain :
a. Form

b. Text Box

Text box : untuk menginput data string ataupun angka

c. Text Area

Text area : untuk menginput untuk menginput string ataupun

angka yang terdiri atas banyak baris.

d. Radio buton
Radio buton : untuk memilih satu pertanyaan dari beberapa
pertanyaan yang disediakan.

e. Combo Box
Combo box : untuk menampilkan daftar data

7
 f. Check Box
Check bok : untuk memilih satu atau lebih pertanyaan dari
beberapa pertanyaan yang disediakan.

g. Submit
Submit : untuk mengirimkan semua variabel data pada
komponen-komponen form yang ada.

h. Reset

F. CSS (Cascade Style Sheet)

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS

merupakan bahasa yang digunakan untuk mengatur tampilan suatu
dokumen yang ditulis dalam bahasa markup / markup language. Jika
kita berbicara dalam konteks web, bisa di artikan secara bebas
sebagai : CSS merupakan bahasa yang digunakan untuk mengatur
tampilan / desain suatu halaman HTML.

Beberapa hal yang dapat dilakukan dengan CSS.
 colors (warna), margins (ukuran), latar belakang (background),
ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti
colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak)
disebut juga “styles”.
 Cascading Style Sheets juga bisa berarti meletakkan styles
yang berbeda pada layers (lapisan) yang berbeda.
Ada 3 cara untuk memasang CSS pada dokumen HTML
yaitu:
1. External Style Sheet
Aturan CSS disimpan pada suatu file sehingga terpisah dari
dokumen HTML. Kemudian tambahkan kode pemanggilan file
CSS dalam dokumen HTML. Akhiran file CSS adalah .css
2. Inline Style Sheet
Aturan CSS ditulis langsung pada tag HTML yang akan diatur
tampilannya menggunakan atribut style:

8
 a) Satuan dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar
monitor)

2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam
elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah
ukuran font)

Sintaks penulisan CSS sebagai berikut:

Penjelasan:
Aturan CSS terdiri 2 bagian:
 Selector
Biasanya berupa tag HTML, id, class
id menggunakan tanda # didepan nama selector
class menggunakan tanda titik didepan nama selector
contoh :
h1 { color : blue ; } ➔ tag html h1
#teks { color :green; } ➔ id
.warna { color : red; } ➔ class
 Declaration
Berisi aturan-aturan css yang terdiri dari properti dan nilainya
yang dipisahkan oleh tanda titik dua. Setiap aturan css harus
diakhiri dengan tanda titik koma.

9
Selector ID dan Class pada CSS
Untuk selector id pada css ditandai dengan tanda #(pagar)
contoh penulisan seperti berikut :

Penggunaanya dalam script HTML :

Properti-properti CSS

Properti CSS jumlahnya sangat banyak, berikut beberapa

diantaranya:

Pseduo-Class
Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang
membuat kita dapat mendefinisikan style pada keadaan tertentu
dari elemen tersebut. Pseduo-class terbagi menjadi beberapa type,
sebagai berikut :
1. Yang berhubungan dengan link

 : link
Style default pada sebuah link (a yang memiliki href)

10
  : hover
Style ketika kursor mouse berada diatas sebuah link /
elemen
 : active
Style ketika sebuah link di klik (keadaan aktif)
 : visited
Style ketika sebuah link sudah pernah di kunjungi
sebelumnya (menggunakan browser yang sama)

2. Yang berhubungan dengan posisi elemen (ada pada css 3)

 : first-child
Memilih elemen pertama dari sebuah parent (elemen
pembungkusnya )
 : last-child
Memilih elemen terakhir dari sebuah parent (elemen
pembungkusnya )
 : nth-child(n)
Memilih elemen ke (n) dari sebuah parent (elemen
pembungkusnya ) n bisa berarti urutan 1,2,3,….. atau pola
(2n),(3n+2), atau ganjil dan genap, even & odd
 : firs-of-type
Memilih elemen pertama dari sebuah jenis / tipe tag
 : Last-of-type
Memilih elemen terakhir dari sebuah jenis / tipe tag

G. Sublime Text

Sublime Text adalah aplikasi editor untuk kode dan text

yang dapat berjalan diberbagai platform operating system
dengan menggunakan teknologi Phyton Api. Terciptanya
aplikasi ini terinspirasi dari aplikasi Vim, Aplikasi ini
sangatlah fleksibel dan powerfull. Fungsionaliatas dari aplikasi
ini dapat dikembangkan dengan menggunakan sublime
packages. Sublime Text bukanlah aplikasi opensource dan juga
aplikasi yang dapat digunakan dan didapatkan secara gartis,
akan tetapi beberapa fitur pengembangan fungsionalitas
(packages) dari aplikasi ini merupakan hasil dari temuan dan
mendapat dukungan penuh dari komunitas serta memiliki
lisensi gratis.

Sublime text mendukung berbagai bahasa

pemrograman dan mampu menyajikan fitur syntax highlight
hampir di semua bahasa pemrograman yang didukung ataupun
dikembangkan oleh komunitas seperti; C, C++, C#, CSS, D,
Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript,

11
 LaTeX, Lisp, Lua, Markdown, MATLAB, Ocaml, Perl, PHP,
Python, R, Ruby, SQL,TCL,Textile and XML. Biasanya bagi
bahasa pemrograman yang didukung dengan menggunakan
add-ons yang bisa di download sesuai kebutuhan user.

2.3 Struktur Navigasi

Pembuatan web informasi Universitas cendikia ulum memiliki
struktur navigasi campuran yaitu :

UNIVERSITAS CENDEKIA ULUM

HOME LOGIN DOSEN MAHASISWA PMB ABOUT

PROFILE
HOME HOME

VISI
JADWAL KULIAH JADWAL MENGAJAR

MISI
NILAI LOG OUT

LOG OUT

2.4 Syntax Program

a. Syntax halaman Home ( Index.html)

12
b. Syntax halaman Baca Selengkapnya

c. Syntax halaman Login (login.php)

1. Input login

13
2. Output login

14
d. Syntax halaman Dosen

1. Input logindosen.php

15
2. Output detaildosen.php

16
e. Syntax halaman Mahasiswa

17
f. Syntax halaman PMB
1. Inputdatamhs.php

18
19
2. Outputdatamhs.php

20
g. Syntax halaman About

1. Profil.html

2. Visi.html

21
 3. Misi.html

h. Tampilan Halaman Web

1. Tampilan Index.html
a. Home

b. Tampilan Baca Selengkapnya

22
2. Tampilan Login
a. Input Login

b. Output Login

b. Tampilan Dosen
1. Login Dosen

23
 2. Output Dosen

c. Tampilan Mahasiswa

d. Tampilan PMB
1. Input Data Mahasiswa

24
 2. Output Data Mahasiswa

e. Tampilan About
1. Profil

2. Visi

25
3. Misi

26
 BAB III
PENUTUP

3.1 Kesimpulan
Berdasarkan uraian tentang pembuatan sistem informasi Universitas
Cendikia Ulum berbasis web yang telah dibahas pada bab sebelumnya, kami
dapat memberikan kesimpulan bahwa sebuah website sederhana, sistem
informasi universitas dapat dibangun menggunakan program aplikasi sublime
text dan bahasa pemrograman seperti PHP, HTML, serta CSS. Dengan
adanya website sistem informasi universitas cendikia ulum ini akan
memberikan kemudahan bagi mahasiswa untuk mengakses berbagai
informasi tentang kegiatan atau yang lainnya.

3.2 Saran
Semoga makalah ini dapat memberi manfaat bagi pembaca. Kurangnya
pengetahuan dalam penyusunan makalah ini diharapkan para pembaca lebih
selektif dalam mengambil informasi yang ada. Kritik dan saran yang
membangun juga kami harapkan dari para pembaca agar makalah selanjutnya
dapat lebih baik.

27