Web Programing Progress

7/24/2019 Web Programing Progress

1/25

Makalah web tema bank

Di Ajukan Oleh :

Kelompok

1. ALVIN FAUZIE (1213276!

2. "#$MA% A"IF (1213&72!

3. 'UMA"IAN%# (121366)!&. 'AE*U+IN (12131,&7!

). ILFAN A. FA-"I (1,121&&)!

6. EFAN A. 'A*U%"A (12137)2!

AKA+EMI MANA-EMEN INF#"MA%IKA +AN K#M*U%E"

INA 'A"ANA INF#"MA%IKA

%AN/E"AN/ 201)

1


2/25

KA%A *EN/AN%A"

Segala puji bagi Allah SWT Tuhan yang telah melimpahkan berbagai macam

kenikmatan kepada kita semua, shalawat dan salam mudah-mudahan tetap tercurahkan

kepada baginda asulullah SAW sang pembawa kebenaran sehingga kita bisa menikmati

manisnya iman dan islam dan mudah-mudahan kita termasuk ummat yang mendapatkan

sya!aatnya dihari kiamat nanti, amin"

Dalam pembuatan makalah ini, tidak sedikit hambatan yang kami hadapi" #amun

kami menyadari bahwa kelancaran dalam pembuatan makalah ini tidak lain berkat

bantuan, d$r$ngan teman-teman dan bimbingan d$sen %ata &uliah Web 'r$graming,

sehingga kendala-kendala yang kami hadapi dapat teratasi"

%akalah yang akan kami bahas disini (WebSite )ank syal*asyariah+ "

Akhir kata kami berterimaksih kepada seluruh pihak yang terkait dalam

tersusunnya makalah ini hingga dapat terselesaikan dengan baik, khusunya kepada D$sen

yang telah memberikan tugas ini sehingga kami bisa banyak belajar dalam pr$ses

penyusunan makalah ini dan kami sadar makalah ini tidaklah sempurna maka dari itu

saran dan kritik dari para pembaca kami harapkan guna kesempurnaan makalah kami

yang akan dating"

Tagerang, #$*ember .1

'enyusun,


3/25

+AF%A" I'I

/A0A%A# 2D20""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" i

&ATA '3#4A#TA"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" ii

DA5TA 6S6 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

iii

)A) 6 '3#DA/202A#

6"1 0atar )elakang """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

7

6" Tujuan dan %an!aat """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

6"8 uang 0ingkup"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

)A) 66 0A#DASA# T3O6"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

9

"1" &$nsep dasar web"""" 9

"" )ahasa 'r$gram """;

"8" )asis data""$mpany 'r$!ile uni$r Apps+

1.2 %4an 5an Manaat

Ada beberapa man!aat dan tujuan dalam 'embuatan Website >$mpany 'r$!ile uni$r

Apps

1B 3!ekti!itas waktu dan tenaga"

'embuatan Website >$mpany 'r$!ile selain sebagai sarana pr$m$si $nline juga

memberikan layanan kearah yang lebih baik dan pr$!essi$nal"

B &eakuratan data adalah penting"Sistem ini diharapkan dapat menekan tingkat kesalahan yang paling banyak

disebabkan $leh !akt$r /uman 3rr$r" &arena dengan sistem ini, semua akti!itas jalur

data dapat kita telusuri dan dapat dipertanggung jawabkan secara k$nsisten"

8B &emudahan masyarakat dalam mendapatkan in!$rmasi secara akurat dan terpercaya"

Dengan menggunakan website sebagai sarana penyebaran in!$rmasi dan website

sebagai sarana s$sialisasi pr$gram-pr$gram dari sebuah 'erusahaan, diharapkan dapat

memudahkan masyarakat untuk mendapatkan in!$rmasi terkini yang diupdate secara

berkala $leh pihak 'erusahaanC 6nstansi" Dengan demikian akan terjadi interaksi secara

tidak langsung antara masyarakat dengan 'erusahaan"

7B 3!isiensi kinerja pada 'erusahaan C 6nstansi"

Diharapkan dengan !asilitas yang sudah disediakan $leh sistem data entry dan na*igasi

pada website, maka akan dapat memudahkan sumber daya yang ada untuk melakukan

update data dan entry data secara $ptimal"

1.3 "an Lnkp

%asalah yang dibahas pada %akalah ini adalah pembuatan sebuah situs web

digunakan untuk menyampaikan in!$rmasi yang berkaitan dengan in!$rmasi 'erusahaan


6/25

uni$r Apps yang diimplementasikan di urusan %anajemen 6n!$rmatika, dengan

menggunakan bahasa /T%0,>SS,A?AS>6'T,'/' dan %yS0"

A II

LAN+A'AN %E#"I

2.1 Kon8ep +a8a 9eb

Sebuah situs web biasanya ditempatkan setidaknya pada sebuah ser*er web yang

dapat diakses melalui jaringan seperti internet, ataupun jaringan wilayah l$cal melalui

alamat internet yang dikenali sebagai url" 4abungan atas semua situs yang dapat diakses

publik di internet disebut juga sebagai w$rld wide web atau lebih dikenal dengansingkatan www"

2.1.1 'e4aah 9eb

Sejarah penemuan web pada tahun 1=' akan mengatur paket-paket data dan

memastikan kebenaran paket-paket tersebut" 6' akan membawa paket-paket data dari suatu

system ke sistem lain"

2.1.2 Ktea penent ke8k8e8an 8at 9eb8te ata 't8

%embangun situs pr$!essi$nal adalah suatu pekerjaan yang tidak gampang,

perlu persiapan, perencanaan yang baik, tujuan yang jelas dan perc$baan yang

berulang-ulang karena menyangkut semua elemen yang membentuk situs" Apalagi

membangun sebuah situs yang berskala besar, seperti situs p$rtal, e-c$mmerce, e-learning,berita, web mail, !$rum diskusi, dan lain-lain

9


7/25

2.2 aha8a *oam

2ntuk mengembangkan pr$ses pembuatan website penulis menggunakan beberapa bahasa

pemr$graman diantaranya, adalah

1. $%ML ($:pe%e;t Makp Lanae!

%enurut 3dy Winarn$ dkk E.18:1B /T%0 merupakan singkatan dari /ypertFt

%arkup 0anguage, artinya bahasa ini adalah bahasa markup untuk mem!$rmat k$nten

halaman web" Atau dengan kata lain, bahasa untuk mengaturm bagaimana penampilan

dan pem!$rmatan k$nten yang ada di web" /T%0 menekankan penggambaran

k$mp$nen-k$mp$nen struktur dan !$rmat didalam halaman web"

2. *$* (*e8onal $ome *ae!

'/' digunakan untuk membuat tampilan web menjadi lebih dinamis, dengan

'/' anda bisa menjalankan beberapa !ile dalam satu !ile dengan cara memasukan ataumemanggil" '/' itu sendiri sudah dapat berinteraksi dengan beberapa database

walaupun dengan kelengkapan yang berbeda, yaitu seperti: D)%, 5ile'r$

E'ers$nic,6ncB, 6n!$rmiF, 6ngres, 6nterbase, %icr$s$!t Access, %SS0, %yS0,

Oracle, '$stgrS0, dan Sybase" >ara kerja '/' yaitu: pertama client web br$wser

menjalankan !ile '/' itu di web br$wser, kemudian !ile '/' itu dikirim ke web

ser*er" Web ser*er mengirimkannya lagi ke mesin '/' dan didalam mesin '/' itu

dipr$ses, dan setelah dipr$ses $leh mesin '/' maka akan berbentuk !ile /T%0, dan

!ile /T%0 ini akan dikirimkan ke web ser*er dan web ser*er akan memberikan

kepengguna"

3. SS

akan tersimpan berupa !ile >SS tersendiri, jadi akan lebih mudah melakukan

;


8/25

pengeditan, karena biasanya dihubungkan dengan link" ika anda melakukan

perubahan !$rmat, Anda cukup melakukan perubahan pada !ile >SS, maka halaman

yang terhubung dengan !ile >SS tersebut akan ikut berubah" ika menggunakan >SS

bersi!at internal pada halaman, maka bila ada perubahan !$rmat harus melakukan

banyak pengeditan pada smua !ile"

&. -AVA'


9/25

perangkat lunak yang dikenal dengan nama %yS0" %yS0 merupakan salah satu

perangkat lunak untuk sistem manajemen database S0" %yS0 merupakan tipe data

relasi$nal yang artinya %yS0 menyimpan datanya dalam bentuk tabel-tabel yang saling

berhubungan" EWahana &$mputer, .11:1B

2.& Aplka8 *ean=anan 9eb

Dalam perancangan website ini, ada beberapa aplikasi yang digunakan,

diantaranya:

1" IA%''

IA%'' adalah apache yang diakui kemampuannya dan keandalannya" IA%''itu sendiri adalah paket perangkat lunak yang merupakan singkatan dari I Eyang

berarti memiliki si!at cr$ss-plat!$rmB, A Ewebser*er ApacheB, % Edatabase

%yS0B,' Ebahasa pemr$graman '/'B, ' E)ahasa pemr$graman 'erlB"

" Sublime TeFt adalah teks edit$r berbasis 'yth$n, sebuah teks edit$r yang elegan,

kaya akan !itur, cr$ss-plat!$rm, mudah dan simpel yang cukup terkenal di kalangan

pengembang, penulis, dan desainer" 'ara pr$grammer biasanya menggunakan

sublime TeFt untuk menyunting s$urce c$de yang sedang ia kerjakan

2.) %eo *en5kn

1. 'tkt Na?a8

%enurut 'rihatna E..:1B (Struktur #a*igasi adalah susunan menu atau

hirarki dari suatu situs yang menggambarkan isi dari setiap halaman dan link atau

na*igasi tiap halaman pada suatu situs web+" #a*igasi termasuk struktur terpenting

dalam pembuatan suatu aplikasi multimedia dan gambarnya harus sudah ada pada

tahap perancangan dan rantai kerja dari beberapa area yang berbeda dan dapat

membantu meng$rganisasikan seluruh elemen pembuatan web dengan

memberikan perintah atau pesan" Ada 7 macam bentuk dasar dari na*igasi yang

bisa digunakan dalam pr$ses pembuatan web, yaitu:

1" 0inear ESatu AlurB

0inear Esatu alurB merupakan struktur yang hanya mempunyai satu

rangkaian cerita yang berurut" Dengan kata lain struktur ini hanya hanya dapat

menampilkan satu demi satu tampilan layar secara berurut menurut urutannya"

Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman

sebelum atau satu halaman sesudah dan tidak dapat menampilkan dua

=


10/25

halaman sebelumnya atau dua halaman sesudahnya" Salah satu yang

terpenting dari sturktur ini adalah tidak diperkenankan terjadinya percabangan

" /ierarchical E/irarkiB

Struktur /ierarchical ini percabangan untuk menampilkan data

berdasarkan kriteria tertentu" Tampilan pada menu pertama akan disebut

sebagai master page Ehalaman utama kesatuB, halaman utama ini akan

mempunyai halaman percabangan yang dikatakan sla*e page Ehalaman

pendukungB" ika salah satu halaman pendukung dipilih atau diakti!kan, maka

tampilan tersebut akan bernama master page Ehalaman utama keduaB dan

seterusnya" @ang terpenting dari struktur penjejakan ini tidak diperkenankan

adanya tampilan secara linear"

8" #$n 0inear ETidak )erurutB

Struktur penjejakan n$n 0inear Etidak berurutB merupakan

pengembangan diri struktur penjejakan linear" 'ada struktur ini diperkenankan

membuat penjejakan bercabang" 'emakai bebas menelusuri website tanpa

dibatasi $leh suatu rute dimana k$ntr$l na*igasi dapat mengakses ke semua

halaman manapun" 'ercabangan yang dibuat pada struktur n$n linear ini

berbeda dengan percabangan pada /ierarchical, karena pada percabangan,

tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada %aster

page dan Sla*e page"

1.


11/25

7" >$mp$site E>ampuranB

>$mp$site EcampuranB atau disebut juga struktur penjejakan bebas

merupakan gabungan dari ketiga struktur sebelumnya yaitu 0inear, #$n

0inear, dan /ierarchical" ika suatu tampilan membutuhkan percabangan,

maka dapat dibuat percabangan, dan bila dalam percabangan tersebut terdapat

suatu tampilan yang sama kedudukannya maka dapat dibuat struktur 0inear

dalam percabangan tersebut" Setiap struktur peta penjejakan seperti yang baru

dibahas mempunyai !ungsi dan tujuan tersendiri, tidak ada yang lebih baik

atau lebih buruk" 'engguna peta penjejakan bergatung kepada kebutuhan dan

tujuan dari Web yang hendak dibuat" Semakin k$mpleks peta penjejakan yang

digunakan, maka semakin sulit pembuatan 'age dari peta penjejakan tersebut"

2. Entt: "elaton8hp +aam (E"+!

%enurut @akub E..


12/25

'engujian dimaksudkan untuk mengetahui apakah !ungsi-!ingsi, masukan,

dan keluaran dari perangkat lunak sesuai dengan spesi!ikasi yang dibutuhkan+"

&asus uji yang dibuat untuk melakukan pengujian k$tak hitam harus dibuat dengan

kasus benar dan kasus salah, misalkan untuk kasus pr$ses l$gin maka kasus uji

yang dibuat adalah:

1" ika user memasukan nama pemakai Euser nameB dan kata sandi Epassw$rdB

yang benar

" ika user memasukan nama pemakai Euser nameB yang salah, misalnya nama

pemakai benar tapi kata sandi salah, atau sebaliknya, atau keduanya salah"

1


13/25

A III

ANALI'A +AN *E"AN$reJ ". 4hK

bB /arddisk : D 1LL

!B %$use dan &eyb$ard

gB 'rinter

18


14/25

&ebutuhan perangkat kerasE/ardwareB yang diperlukan untuk

mengimplementasikan sistem in!$rmasi perusahaan berbasis web di uni$r Apps

adalah 1 unit k$mputer,1 unit printer dan 1 unit m$dem yang diletakkan di ruangan

'ublic elati$nship minimal memiliki spesi!ikasi sebagai berikut:

aB 'r$cess$r : 6ntel 'entium 7 J 1"9 4hK

bB /arddisk :


15/25

Saat ini perusahaan uni$r Apps menyampaikan in!$rmasi mengenai

perusahaannya,baik in!$rmasi pr$duk maupun in!$rmasi l$w$ngan kerja banyak

dilakukan melalui media-media seperti:

aB )r$sur

bB 6klan di media cetak

cB e!erensi

dB 6klan di internet

eB 6klan di media elektr$nik

/al tersebut sudah menjadi standar $perasi$nal perusahaan untuk menyampaikan

in!$rmasi kepada masyarakat umum

8"8" 'ermasalahan yang terjadi

'ermasalahan tersebut antara lain:

aB )anyaknya in!$rmasi negati!e mengenai perusahaan di internet

bB &urangnya !eedback dari masyarakat mengenai in!$rmasi perusahaan di internet"

2ntuk mengatasi permasalahan tersebut penulis mengajukan ide untuk pembuatan

website resmi perusahaan"6de penulis didukung $leh sta!!,team management dan

pimpinan perusahaan"

3.& *ean=anan Anta Mka

'ada intinya k$nsep mendesain tampilan website sangat berkaitan dengan desain

gra-!is , dan pada dasarnya mengikut prinsip desain gra!is secara umum" Oleh karena itu

alangkah baiknya jika dalam mendesain halaman tampilanwebsite juga memperhatikan

prinsip desain" 'rinsip-prinsip desain tersebut adalah:

1" &$munikati!" 'rinsip k$munikati! berhubungan dengan c$rp$rate identity, isi

pesan serta audiens"

" 3stetis" 5ungsi dari estetis ini adalah memberikan suatu keindahan, sehingga lebih

menarik minat pengunjung untuk lebih menggali in!$rmasi yang ditawarkan dari

suatu website"

8" 3k$n$mis" Desain web harus memperhatiakan !akt$r ek$n$mis dalam arti ukuran

!ile yang digunakan" /al tersebut berkaitan erat dengan kecepatan akses yang

ditawarkan suatu website"

2ntuk mendapatkan desain yang k$munikati!, estetis dan ek$n$mis hendaknya se$rang

web designer perlu memperhatikan ped$man-ped$man yang ada untuk membuat tata letak

1


16/25

suatu tampilan, yaitu dalam mengatur elemen-elemen lay$ut" 'ed$man yang dimaksud

adalah:

1" &esatuan" 3lemen-elemen lay$ut dari halaman harus ditempatkan sedemikian rupa

sehingga merupakan kesatuan in!$rmasi pada satu halaman atau beberapa halaman"

" )alance" 3lemen-elemen lay$ut dari halaman harus ditempatkan sedemikian rupa

sehingga terdapat keseimbangan secara keseluruhan"

8" &$ntras" Diperlukan untuk men$nj$lkan bagian yang dianggap lebih penting dari

bagian lainnya" &$ntras dapat dinyatakan dengan membedakan ukuran serta

warna dari elemen-elemen lay$ut"

7" &$ntinyuitas" 6n!$rmasi lebih dimengerti $leh pengguna bila mempunyai aliran-

aliran yang baik, sedikit gangguan yang menghambatnya" Suatu aliran in!$rmasi

dapat dikatakan k$ntinyu dan harm$nis bila tampilannya mencerminkan

kesinambungan dari satu bagian ke bagian lain" &$ntinuitas dapat dibuat dengan

membuat halaman-halaman mempunyai gaya, bentuk atau warna yang

memberikan pengguna merasakan kesinambunagn dengan halaman lainnya"

3.&.1 *ean=anan Anta Mka *oam Aplka8

3.&.1.1 *enentan I8@


17/25

cB am dan kalender,untuk mengetahui keadaan waktu pada saat user

mengakses web tersebut"

dB 0$gin dan 0$g $ut,aplikasi untuk menjamin keamanan data website dan

angg$ta Searching,aplikasi untuk mencari artikel atau data umum

perusahaan"

3.&.1.2 +e8n 5an *otot:pe

4ambar 8"1 adalah sebuah rancangan tampilan halaman awal atau index.

L#/# $ome 'e?=e *otool

o

#5e lo Abot

8


18/25

Slider

kenapa memilih kami ser*ice 3Fperience

'$rt!$li$

!$$ter

Gambar 3.1 Tampilan halaman index

4ambar 8" adalah sebuah rancangan tampilan halaman Ser*ice


o

#5e lo Abot

8


19/25

4alery pr$ject

5$$ter

Gambar 3.3 Tampilan halaman Portfolio

4ambar 8"7 adalah sebuah rancangan tampilan halaman Order


o

#5e lo Abot

8


20/25

Artikel

5$$ter

Gambar 3.5 Tampilan halaman Blog

4ambar 8"9 adalah sebuah rancangan tampilan halaman 'r$!il 'erusahaan C Ab$ut 2s


o

#5e lo Abot

8


21/25

5$rm c$ntact N s$sial media

5$$ter

Gambar 3.& Tampilan halaman mengh!b!ngi 'ami # memberi feedbac'

3.&.1.3 +e8an %amplan A5mn

4ambar 8"< adalah sebuah rancangan tampilan halaman utama

Gambar 3.( Tampilan halaman !tama

4ambar 8"= adalah sebuah rancangan tampilan halaman data user C user

Gambar 3.) Tampilan halaman manage data !"er

4ambar 8"1. adalah sebuah rancangan tampilan halaman data user C user

1


22/25

Gambar 3.1* Tampilan halaman manage blog

3.) 'tkt Na?a8

8""1 Struktur #a*igasi 2ser C 'engunjung

8"" Struktur #a*igasi Admin


23/25

3.6 "an=anan a88 +ata

3.7 'pe8ka8 le

8";"1"Tabel user

#$ 3lemen data Akr$nim Tipe 'anjang &eterangan

1 6d user iduser 6#T < 'rimary key

passw$rd pass ?archar

8 #ama user nmuser ?archar 8.

7 email email ?archar

telp$ne telp 6#T 17

9 keterangan keterangan ?archar

; le*el le*el 6#T 1

8


24/25

8";" Tabel artikel

#$ 3lemen data Akr$nim Tipe 'anjang &eterangan

1 6d artikel idartikel 6#T 11 'rimary key

kateg$ri kateg$ri *archar

judul judul *archar

8 pengirim pengirim *archar 8.7 wkt wkt DateTime

isi isi teFt

9 'ublish publish 6#T 1

A VI

*ENU%U*

&.1 Ke8mplan

)erdasarkan pembahasan pada bab-bab sebelumnya, maka pada bab ini yang

merupakan bab terakhir dari makalah ini, penulis akan mec$ba menarik kesimpulan yakni

sebagai berikut :

1B )asisdata sangat dibutuhkan dalam pembuatan sebuah situs web, karena distribusi data

dalam situs tersebut tidak akan berjalan dengan baik tanpa basis data"

B Dalam hal ini kecepatan dan e!ekti!itas waktu adalah !akt$r yang paling penting"

Dengan menggunakan website sebagai sarana pelayanan pr$m$si dan layanan secara

$nline akan sangat membantu dalam pr$ses tersebut"

8B k$nsumen dan masyarakat umum pengguna internet dapat dengan mudah

mendapatkan in!$rmasi seputar layanan pemesanan yang ditawarkan"

&.2 'aan

Dengan terselesainya perancangan website uni$r Apps pada penyedia jasa

pembuatan website,'r$gram deskt$p dan %$bile Apps ini dan dalam sub bab terakhir ini

penulis ingin memberikan saran dan harapan yang dapat memberikan masukan yakni :

1B 'embuatan website ini masih sangat terbilang sederhana, terutama dari segi

tampilan dan segi keamanan, ada baiknya untuk tahap pengembangan sistem baru

diharapkan dibuat semenarik mungkin dan dikembangkan lebih lanjut dengan

tambahan in!$rmasi yang lebih lengkap lagi yang pastinya bisa lebih berman!aat

bagi pengel$la dan pengguna website tersebut"

7


25/25

B 'erancangan website ini diharapkan bisa lebih interakti! agar in!$rmasi yang

diinginkan pengguna dapat lebih berman!aat lagi"

8B Diharapkan dunia bisnis harus lebih tanggap dengan perkembangan tekn$l$gi agar

tidak tertinggal dengan negara-negara yang lebih maju"

7B Diharapkan juga pembisinis dapat memasyarakatkan met$de transaksi secara

$nline"

+AF%A" *U'%AKA

/akim, 0ukmanul dan %usalini, 2us" >ara %udah %emadukan Web Design dan Web

'r$gramming" akarta:3leF %edia &$mputind$" ..7"

6mansyah, %uhammad" '/' dan %yS0 2ntuk Orang Awam" 'alembang:%aFik$m"

..8

Arbie" %anajemen Database dengan %yS0" @$gyakarta:A#D6" ..8

&adir, Abdul" Dasar 'emr$graman Web Dinamis %enggunakan '/'" @$gyakarta: A#D6"

..Deliana /artini, 0isye %areta >ahya dan &ikis Sabrina &aisariKa" ..=" Database dengan

S0 Ser*er .." akarta: %itra Wacana %edia"

Documents

Web Programing Progress