Anda di halaman 1dari 11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP

ABOUTME

FOLLOWME

ANDROID

GAMEPC

TUTORIALBLOGGER

TUGASSOFTSKILL

MYONLINECV

REVIEWSOPBUAH

SELAMATDATANGDIADITYAJANATABLOGJIKAANDAMENEMUKANLI

MyFriendsBlog

Thursday,April18,2013

Perhatian!

DiscoveryKnowledge(Deny
G.)

TutorialMembuatWebsiteInputOutputdengan
Dreamweaver+XAMPP

Apabilatemantem
menamukanlinky
invalid/Rusak/S
diharapkanteman
laporkanlinknya
komentardibawah
blogger(Bukanya
Facebook),ataula
disiniagarbisaseg
perbaiki.TerimaK
Kerjasamanya.

KONDEonde(ImamM.)
MyMemories(A.Puteri)
Dilarangmasukyee..(Sulistyo
P.)
MyBlog(OktavianaD.)
PromoMitraUsaha(My

Tweet

AssalamualaikumWr.Wb.

Selamatmalamtemanteman.
Sekarangguemaungebahastentangcaranyabikinwebsitesederhana,yangdimanaweb
tersebutbisamelakukanSIDU(Select,Input,Delete,Update)denganmenggunakan
aplikasiXAMPPdanDreamweaver.
DalamTutorialini,guemakeAdobeDreamweaverCS3PortabledanXAMPPv1.6.1.

MyBelovedFriends:)
Pengikut(45)Berikutnya

DownloadAplikasinyadisini:
XAMPPv1.6.1
AdobeDreamweaverCS3Portable
Tutorialiniakanguebagimenjadibeberapabagian,agartemantemantidakmengalami
kesulitan.So,checkthisout:)
Pertamatama,kaliandownloaddulukeduaSoftwarediatas,tapiapabilasudahpunya,
yaudahgakusahdidownload:D

Kategori

Android
Android

menarik
Request (2)
Luar (3)
Film (2)

Android
Hacking(2)

Kuliah (7)

lainlain
Vacation

TAHAP1.PengaktifanPhpMyAdmin

PadatahapinikitaakanmembuatsebuahdatabasemenggunakanPhpMyAdmindiXAMPP.
Pertamatama,jalankanSoftwareXAMPPnya,kirakirasepertiini:

Ikuti

pelajaran
C++ (3)
Perguruan Tinggi
(2) Review

Tips dan T
Tutorial
B.Indonesia
(4) Video

Website(3)

Tags

artikel

menarik

Thisis..GUNA

Android Tips dan Trik


lain
lain
pelajaran
Tutorial Software Curhat
AplikasiAndroidKuliahGame
Android
Review
Misteri
TutorialBloggerebook inspirasi
BandLuarGamePCOnVacation
Pemrograman C++ Perguruan
Tinggi Website Artikel Request
Download Film Hacking Lagu
Pengharapan Photoshop Band
Indie Iseng LabSI Pameran Tutorial

SiteInfo

Setelahitu,bukabrowseryangdigunakanlaluketik
localhostpadaaddressbar,maka

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

1/11

11/3/2016
Blender B.Indonesia Video Visual
basic

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP
nantiakanmunculsepertiini:

VIVA.co.idTEKNOLOGI
YLKI:PulsaJadiAdiksi,
Fenomena
Mengerikan11/3/2016
MenkominfoSebutTakAda
OperatoryangMauBangun
Jaringan11/3/2016
Opera:KamiTidak
MenyelidikiAplikasie
Commerce11/3/2016
KaskusJugaBantahBocorkan
DataPengguna11/3/2016

LalukliktulisanPhpMyAdminyangadadimenutoolssebelahkiri.Atauketiksajadi
addressbar:localhost/phpmyadmin

PopularPosts

SebabUKMSeringJadi
SasaranSerangan
Malware11/3/2016
makaakanmunculjendelaPhpMyAdmin.

XAMPP

TAHAP2.MembuatDatabase

DroidSheepMem
OrangLainDenga
Hijacking

1.Masukkannamadatabaseyangakandibuat,contoh:
2KA32(NamaKelasguehehe..)
Laluklikcreate.

BeritaDetiki

2.Masukkannamatableyangingindibuat,danmasukkanjugaadaberapakolomyang
diperlukan.Setelahselesai,klikGO.

MenkominfoMula
MasaDepanInter
Data11/3/2016

RidwanKamilBeb
PengalamanBand
Digital11/3/201

BeginiRencanaKo
BikinAturanuntu
cs11/3/2016
3.Masukkannamakolomyangingindibuat,danjadikansalahsatusebagaiprimary
key.Disiniguemenjadikan
NPMsebagaiprimarykey.

VivoGarap100R
perBulandi
Tangerang

BeragamReaksiH
Biaya
Interkoneksi

Apabilasudahselesai,kliktulisanSave.Tapiapabilakalianmaunambah1kolom
lagi,klikGO.

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

2/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP

TAHAP3.MengkoneksikanDatabaseDenganDreamweaver

1.Setelahpembuatandatabaseselesai,sekaranglanjutbukaAdobeDreamweaver.

2.Lihatdipojokkananbawah,akanadapanel"Files".Dandisanaakanadatulisan
"ManageSite",kliktulisanmanagesites.

3.Munculjendela"ManageSites",setelahituklik"New">"Site".
4.SetelahitugantitabBasicmenjadiAdvance.Adabeberapapoinyangharus
diganti,antaralain:
SiteName
LocalRootFolder
HTTPAddress
UntukLocalRootFolder,klikyanggambariconfolderdisamping,karenakita
menggunakanXAMPP,makapergike
C:/XAMPP/htdocssetelahitubikinfolderbaru,
namanyaterserahkalian,disiniguebikinnamanya"contoh".

apabilasudahdiganti,jangandisavedulu,pindahkepanelTestingServer.
5.Apabilasudah,ubahServerModelmenjai
PHPMYSQLdanAccessmenjadi

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

3/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP
Local/Network.UbahjugaTestingserverfolder
danURLPrefix.

SetelahitubaruklikOKlaluDone.
6.KembalilagikehalamanawalDW,sekarangpilihcreatenewPHP.

7.PadaPanelAplication,klikyangtandaplus(+)laluklikMySQLConnection.

8.Isidatadatanyasebagaiberikut:
Connectionname:(terserah)
MySQLServer:localhost
UserName:root(usernamedefault:root,tapikaloudahkalianganti,pake
usernamekalian)
Password:(passworddefault:kosong,tapikaloudahkalianganti,pake
passwordkalian)
Database:(KliktombolSelect..)

Apabilasudahselesai,klikOK.Makanantiakankeluardatabaseyangtadisudah
dibuat.

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

4/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP

disinitahappengkoneksiansudahselesai.Sekarangtahapselanjutnya:

TAHAP4.MembuatHalamanInputData

1.Savedahuluhalamanyangbarusandibuatdenganmengklik
file>saveatauCTRL+S.

Berinamaterserahnamunsesuaidenganapayangingindibuat,sepertiinput,masuk,
insertdll.
2.Setelahdisave,buatforminputannyadenganklik
Insert>DataObjects>Insert
Record>RecordInsertionFormWizard

3.KlikpadabagianConnectionmenjadikoneksitadiyangsudahdibuat.LaluklikOK.

4.Makaakanmuncultampilansepertiini

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

5/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP

Setelahitusavelagidanlanjut..

TAHAP5.MembuatHalamanUntukMenampikanData

1.Buathalamanbarudenganklik
file>new.PilihyangPHP.
2.SetelahitusavelagidenganmenekanCTRL+S.Berinamaoutputatauapapun
terserah.
3.Sekarangbikinrecordsetdenganmengklik
Insert>DataObjects>Recordset.

4.Selanjutnyamasukkandatarecordsetsepertiini
Name:(Terserah)
Connection:(Namakoneksiyangtadidibuat)
Table:(Namatabelyangtelahdibuatpadasaatmembuatdatabase)
Columns:All
Filter:None
Sort:NPM|Ascending

5.Setelahitubuatdynamictablenya.Klik
Insert>DataObjects>DynamicData>
DynamicTable

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

6/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP

6.SetelahmunculjendelaDynamicTable,klikOKlaluakanmuncultampilanseperti
ini

Savelagihalamanini.Untukmencobanyacobabukawebbrowserandalaluketik
localhost/(namafolder)/(namafile)karenanamafoldergue"contoh"dannamafile
gue"input.php"makaguengetiknya
localhost/contoh/input.php
Makaakantampilforminput.php,isidatatersebutuntukmencobanya.

Setelahituketikformoutputnyagantiinput.phpmenjadioutput.php,apabila
berhasilmakaakanmuncultampilansepertiini

TAHAP6.MembuatHalamanUntukMengeditData

1.Buathalamanbarulagilaludisavedanberinama"edit".
2.BuatRecordsetbarulagi,bedanyadisiniyangbagiansortgakusahdiubah,yang
bagianfilterdiubahmenjadinamaprimarykey(dalamkasusiniprimarykeynya
adalahNPM)LaluklikOK.

3.Buatformeditnya,klik
Insert>DataObjects>UpdateRecord>RecordUpdate
FormWizard
4.AturjendelaupdateformwizrdnyasepertiConnection,Tabletoupdate,After
Updating,goto..dll.Apabilasudahselesai,klikOK.

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

7/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP

5.Setelahselesai,savehalamanedit.phpini.LalubukalagihalamanOutput.php
untukmembuatlinkeditnya.
6.Setelahhalamanoutput.phpdibuka,blok1kolomlalu
klikkanan>Table>Insert
RoworColumns..

7.Lalupilih"column"danklikOK.

8.Buatlahhalamannyamenjadisepertiini

9.Bloktulisan"Edit"laluklik
Insert>Hyperlink,untuklinkklikgambarfolder
disampinglaluklik"edit",setelahituklikparameter,laluketikkannamaparameter
yangdigunakan,disiniguemakeprimarykeynyayaituNPM,laluklikbagiankosong
dibawahtulisan"value",klikdynamicdata(yanggambarpetir)laluklikNPM,
setelahituklikOK.

10.LaluklikOK,OKdanOK.Apabilasudah,silahkandicobaberjalandengan
semestinyaatautidak.

TAHAP7.MembuatHalamanHapusData

1.BuathalamanPHPbaru,lalusavedanberinama"Hapus".
2.LaluklikInsert>DataObject>DeleteRecord.Laluisisepertiini

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

8/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP

3.SetelahituklikOK.Lalukembalikehalamanoutput.phpuntukmembuatlinkhapus.
4.Setelahdihalamanoutput.php,bloklagikolomnyalalu
klikkanan>table>
InsertRowsorcolumns.
.lalupilihcolumnsdanOK

5.Lalubuathyperlinklagiuntukhapusnyakirakirasepertiini

6.Bloktulisan"Hapus"laluklik
Insert>Hyperlink.Setelahitubuatlagisama
sepertiHyperlinkEdit.

7.SetelahituOK,OK,OKdanOK:D
8.Sekarangmasihdihalamanoutput.php,ubahmode"
Design"menjadi"Code"

9.Lihatkodephpuntuk"hapus.php",pastikansamadengankode"edit.php"

Apabilaberbeda,dikopasajakodenyaagarsama.
10.Setelahitucobasekarangwebsiteyangsudahdibuat.Apakahbisaberjalanatau
adayangerror.Websiteyangdibuatbersamadengantutorialini100%work.Mudah
mudahansamadengantemantemansemuaya:)

TAMBAHAN

Websiteinimasihsangatlahsederhana,disinihanyamenerapkandasarnyasaja.Jadi
untukdesaindanyanglainnyakaliankreasiinsendiriya,kreasikalianpastilebih
bagus:)
Apabilaadayangsalahataumasihbingung,bisaditanyakandikolomkomentardibawah
walaupungaksemuabisaguejawab:p.
SekianTutorialIni.TerimaKasih.

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

9/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP
Untukmengonlinekanwebyangkalianbuatini,bisadilihatcaranyadi
Cara
mengkoneksikandatabasekeIdHostinger
UntukmelihatcontohLivenyabisakunjungilinkini>>
http://adityajanata.id1945.com/

ABOUTAUTHOR:AdityaJanataPriya
SeseorangyangsangatmenyukaiGameSimple,NasiGoreng,SopbuahdanKamu.

YangMemposting:AdityaJanataPriya
JamThursday,April18,2013

Tag:Tutorial,Website

3Comments

19Comments

3Comments

Sortby Oldest

Addacomment...

JunielHya
good.....
LikeReplySep18,20157:28pm

MuRo
SMKNegeri1Palangkaraya

makasihgan
LikeReplySep26,20158:20am

MiaGani
EksekutifPenjualanatTAMANSARIMAHOGANY

terimakasihbanyak,postinganinisangatmembantu
LikeReplyOct28,20165:10pm
FacebookCommentsPlugin

NewerPost

Home

OlderPost

Subscribeto:PostComments(Atom)

DaftarArtikel

ThisBlogOnFacebook

2016(2)

AdityaJanataBlog

2015(2)

106likes

2014(1)
2013(18)
October(1)
August(1)

LikePage

Share

Bethefirstofyourfriendstolikethis

July(2)
June(1)
May(3)
April(4)
MembuatFileKosongDenganUkuranBesar

AdityaJanataBlog
March24

Adayangmainjuga?(^^)

TutorialMembuatWebsiteInputOutputdenganDream...
ProgramKondisidiC++denganInputan2Karakter/...
CaraCheatWildPokemondiPokemonFireRed
March(2)
February(3)
January(1)
2012(34)

TipsMendapatkanBestFrien

2011(40)

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

10/11

11/3/2016

AdityaJanataBlog:TutorialMembuatWebsiteInputOutputdenganDreamweaver+XAMPP

2010(23)

AdityaJanataBlog.20102016.Poweredby
Blogger.

http://adityajanata.blogspot.co.id/2013/04/tutorialmembuatwebsiteinputoutput.html

11/11