div div
div class=menu ul
lia href=?menu=1Berandaali lia href=?menu=2Visi dan Misiali
lia href=?menu=3Data Masyarakatali lia href=?menu=4Permohonan KTPali
lia href=?menu=5Permohonan KKali lia href=?menu=6Pesanali
ul div
div class=content ?php
menu=_GET[menu]; ifmenu==1{
includepageberanda.php; }elseifmenu==2{
includepagevisidanmisi.php; }elseifmenu==3{
includepagedata.php; }elseifmenu==4{
includepagesyarat_pembuatanktp.php; }elseif menu==5{
includepagesyarat_kartukeluarga.php; }elseif menu==6{
includepagebukutamu.php; }else{
includepageberanda.php; }
? div class=footerKelurahan Titi Rantai Medan copyright copy
2016 by: Juffryson Pasaribu 132406017 div
div body
2. Beranda div id=wrapper
Universitas Sumatera Utara
div class=slider-wrapper theme-default div id=slider class=nivoSlider
img src=nivo-sliderdemoimageslurah 1.jpg data-thumb=imageslurah 1.jpg alt=
img src=nivo-sliderdemoimageslurah 3.jpg data-thumb=imageslurah 3.jpg alt= a
img src=nivo-sliderdemoimageslurah 5.jpg data-thumb=imageslurah 5.jpg alt= data-transition=slideInLeft
img src=nivo-sliderdemoimageslurah 8.jpg data-thumb=imageslurah 8.jpg alt=
div div
div div class=content
div id=fan p id=jdaSelamat Datang di Kelurahan Titi Rantai Medan,
Sumatera Utarap br
pBerdasarkan Surat Keputusan Gubernur KDH Tingkat 1 Sumatera Utara Nomor :68811P.S.U. Kelurahan Titi Rantai terbentuk seiring terbentuknya
Kecamatan Medan Baru tanggal 01 Nopember 1952 bersamaan dengan keluarnyanya Maklumat Walikota Medan. Kelurahan Titi Rantai merupakan bagian wilayah dari
Kota Medan dengan luas wilayah 106 Ha.p
pKelurahan Titi Rantai dengan luas wilayahnya 106 Ha, Kelurahan Titi rantai adalah salah satu daerah hunian dan permukiman di Kota Medan, dengan
penduduknya berjumlah 11.656 Jiwa terbagi atas laki laki 5418 jiwa dan perempuan 6238 jiwa, Jumlah KK 1.437 jiwa 2011. Kelurahan Titi rantai terbagi atas 10
lingkungan dan 20 blok sensus. p
pBatas Wilayah Kelurahan Titi rantai :p p-Sebelah Utara Berbatasan dengan Kelurahan Padang Bulanp
p-Sebelah Selatan Berbatasan dengan Kelurahan Beringin Kecamatan Medan Selayangp
p-Sebelah Barat Berbatasan dengan Kelurahan PB Selayang II Kecamatan Medan Selayangp
p-Sebelah Timur Berbatasan dengan Kelurahan Polonia Kecamatan Medan Polonia.p
p Peta Wilayah Kelurahan Titi Rantai.p div
div class=bawahimg src=gambarPeta.PNG hspace=230 vspace=20
div div
Universitas Sumatera Utara
script type=textjavascript src=nivo-sliderdemoscriptsjquery- 1.9.0.min.jsscript
script type=textjavascript src=nivo-sliderjquery.nivo.slider.jsscript script type=textjavascript
window.loadfunction { slider.nivoSlider;
}; script
3. Data DOCTYPE html
html head
meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0
link rel=stylesheet href=csscss_table.css --[if IE]--
style
Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px
and also iPads specifically. media
only screen and max-width: 760px, min-device-width: 768px and max-device-width: 1024px {
Force table to not be like tables anymore table, thead, tbody, th, td, tr {
display: block; }
Hide table headers but not display: none;, for accessibility thead tr {
position: absolute; top: -9999px;
Universitas Sumatera Utara
left: -9999px; }
tr { border: 1px solid ccc; } td {
Behave like a row border: none;
border-bottom: 1px solid eee; position: relative;
padding-left: 50; }
td:before { Now like a table header
position: absolute; Topleft values mimic padding
top: 6px; left: 6px;
width: 45; padding-right: 10px;
white-space: nowrap; }
Label the data td:nth-of-type1:before { content: First Name; }
td:nth-of-type2:before { content: Last Name; } td:nth-of-type3:before { content: Job Title; }
td:nth-of-type4:before { content: Favorite Color; } td:nth-of-type5:before { content: Wars of Trek?; }
td:nth-of-type6:before { content: Porn Name; } td:nth-of-type7:before { content: Date of Birth; }
td:nth-of-type8:before { content: Dream Vacation City; } td:nth-of-type9:before { content: GPA; }
td:nth-of-type10:before { content: Arbitrary Data; } }
Smartphones portrait and landscape ----------- media only screen
and min-device-width : 320px and max-device-width : 480px {
Universitas Sumatera Utara
body { padding: 0;
margin: 0; width: 320px; }
} iPads portrait and landscape -----------
media only screen and min-device-width: 768px and max-device-width: 1024px {
body { width: 495px;
} }
style --[endif]--
head body
div id=page-wrap h1Data Penduduk Kelurahan Titi Rantai Medanh1
br table
thead tr
thNoth thNAMAth
thNIKth thJENIS KELAMINth
tr thead
tbody tr
?php include koneksi.php;
query=mysql_queryselect from tbl_penduduk; no=1;
while data=mysql_fetch_arrayquery {
Universitas Sumatera Utara
echo tr id=\wrna\ td.no.td
td.data[nama].td td.data[nik].td
td.data[jenis_kelamin].th; ? ?php
echo tr;
no++; } ?
tr
tbody table
div body
html 4. Data 2
DOCTYPE html html
head
link rel=stylesheet type=textcss href=stylecss_visi.css head
body div class=content
div class = content_kiri div class=text
h1Data Penduduk Kelurahan Titi Rantai Medanh1
br table
thead tr
thNoth thNAMAth
thNIKth thJENIS KELAMINth
tr
Universitas Sumatera Utara
thead tbody
tr ?php
include koneksi.php; query=mysql_queryselect from tbl_penduduk;
no=1; while data=mysql_fetch_arrayquery
{ echo tr id=\wrna\
td.no.td td.data[nama].td
td.data[nik].td td.data[jenis_kelamin].th; ?
?php echo
tr; no++;
} ? tr
tbody table
div div
div style=clear:bothdiv div
div body
html 5. Input KK
html head
titleInput KKtitle
Universitas Sumatera Utara
style type=textcss body{background:ebebeb; font-family:Arial;color:fff;}
login{ color:fff;
width:340px; padding:20px;
margin:60px auto; border:2px solid fff;
border-radius:5px; -moz-border-radius:5px;
-webkit-border-radius:5px; -o-border-radius:5px;
background: -webkit-linear-gradient0066CC, 5EACFB; For Safari 5.1 to 6.0
background: -o-linear-gradient0066CC, 5EACFB; For Opera 11.1 to 12.0
background: -moz-linear-gradient0066CC, 5EACFB; For Firefox 3.6 to 15
background: linear-gradient0066CC, 5EACFB; Standard syntax
} input{
padding:4px; }
.tombol{ padding:4px 10px;
background:urlimagesbgmenu.gif repeat-x; text-decoration:none;
border-radius:5px; -moz-border-radius:5px;
-webkit-border-radius:5px; -o-border-radius:5px;
color:fff; margin:5px;
} .tombol:hover{
background:706157; }
.th{ background:urlimagesbgmenu.gif repeat-x;
color:fff; border:1px solid fff;
}
Universitas Sumatera Utara
table{margin:0;} style
head body
div id=login form method=POST action=proses_kK.php
table width=100 cellpadding=4px align=center tr
th class=th colspan=2FORMULIR PERMOHONAN KARTU KELUARGAth
tr tr
tr tdNama Lengkap Pemohontd
tdinput type=text name=namalengkap requiredtd
tr tr
tdNIK Pemohontd tdinput type=number name=nikpemohon
requiredtd tr
tr tdNama Kepala Keluargatd
tdinput type=text name=namakk requiredtd tr
tr tdNomor Kartu Keluargatd
tdinput type=number name=nomorkk requiredtd
tr tr
tdAlamattd tdinput type=text name=alamat requiredtd
tr tr
tdNama Kepala Keluarga Lamatd tdinput type=text name=namalama
requiredtd tr
tr tdAlamat Keluarga Lamatd
Universitas Sumatera Utara
tdinput type=text name=alamatlama requiredtd
tr tr
tdJumlah Anggotatd tdinput type=number name=anggotakeluarga
requiredtd tr
tr tdNo Telepontd
tdinput type=number name=telepon requiredtd
tr tr
tdAlasan Permohonantd td colspan=4
select name=alasan option value=Pengurangan Anggota
KeluargaPengurangan Anggota Keluargaoption option value=Penambahan Anggota
KeluargaPenambahan Anggota Keluargaoption option value=Alasan LainnyaAlasan
Lainnyaoption select
td tr
tr tdnbsp;td
td align=rightinput class=tombol type=submit value=Kirimtd
tr tr
tdnbsp;td td align=rightinput class=tombol type=reset
value=Resettd tr
table form
div body
Universitas Sumatera Utara
html 6. Input KTP
html head
titleInput KTPtitle style type=textcss
body{background:ebebeb; font-family:Arial;color:fff;} login{
color:fff; width:340px;
padding:20px; margin:60px auto;
border:2px solid fff; border-radius:5px;
-moz-border-radius:5px; -webkit-border-radius:5px;
-o-border-radius:5px; background: -webkit-linear-gradient0066CC, 5EACFB;
For Safari 5.1 to 6.0 background: -o-linear-gradient0066CC, 5EACFB; For
Opera 11.1 to 12.0 background: -moz-linear-gradient0066CC, 5EACFB; For
Firefox 3.6 to 15 background: linear-gradient0066CC, 5EACFB; Standard
syntax }
input{ padding:4px;
} .tombol{
padding:4px 10px; background:urlimagesbgmenu.gif repeat-x;
text-decoration:none; border-radius:5px;
-moz-border-radius:5px; -webkit-border-radius:5px;
-o-border-radius:5px; color:fff;
margin:5px; }
Universitas Sumatera Utara
.tombol:hover{ background:706157;
} .th{
background:urlimagesbgmenu.gif repeat-x; color:fff;
border:1px solid fff; }
table{margin:0;} style
head body
div id=login form method=POST action=proses_ktp.php
table width=100 cellpadding=4px align=center tr
th class=th colspan=2FORMULIR PERMOHONAN KTPth
tr tr
td id=joNama Lengkaptd td colspan=10input id=oj type=text name=nama
placeholder=Nama Lengkap requiredtd tr
tr td id=joNIKtd
td colspan=10input id=oj type=text name=nik placeholder=Nomor Induk Kependudukan requiredtd
tr tr
td id=joTanggal Lahirtd td
select name=tanggal ?php
for i=1; i = 31; i++ { echo option
value=\.i.\.i.option; }
? select
select name=bulan ?php
Universitas Sumatera Utara
bulan=arrayJanuari,Februari,Maret,April,Mei,Juni,Juli,Agust us,September,Oktober,November,Desember;
for i=0; i 12 ; i++ { echo option
value=\.bulan[i].\.bulan[i].option; }
? select
select name=tahun ?php
for i=1990; i = 2015; i++ { echo option
value=\.i.\.i.option; }
? select
td tr
td id=joPekerjaantd td colspan=10input id=oj type=text
name=pekerjaan placeholder=Pekerjaan requiredtd tr
tr td id=joKotatd
td colspan=10input id=oj type=text name=kota placeholder=Kota requiredtd
tr tr
td id=joAlamattd td colspan=10input id=oj type=text name=alamat
placeholder=Alamat requiredtd tr
tr td id=joKelurahantd
td colspan=10input id=oj type=text name=kelurahan placeholder=Kelurahan requiredtd
tr tr
td id=joKecamatantd td colspan=10input id=oj type=text
name=kecamatan placeholder=Kecamatan requiredtd
Universitas Sumatera Utara
tr tr
td id=joRTtd td colspan=10input id=oj type=text name=rt
placeholder=RT requiredtd tr
tr td id=joRWtd
td colspan=10input id=oj type=text name=rw placeholder=RW requiredtd
tr td id=joNomor Telepontd
td colspan=10input id=oj type=text name=telepon placeholder=Nomor Telepon requiredtd
tr tr
td id=joJenis Kelamintd td colspan=4
select name=jenis_kelamin option value=Laki-lakiLaki-lakioption
option value=PerempuanPerempuanoption
select td
tr td id=joAgamatd
td colspan=4 select name=agama
option value=Kristen KatolikKristen Katolikoption
option value=Kristen ProtestanKristen Protestanoption
option value=IslamIslamoption option value=HinduHinduoption
option value=BudhaBudhaoption option value=Lain-lainlain-lainoption
select td
tr tr
Universitas Sumatera Utara
td id=joStatustd td colspan=4
select name=status option value=MenikahMenikahoption
option value=Belum MenikahBelum Menikahoption
select td
tr tr
td id=joGolongan Darahtd td colspan=4
select name=golongan_darah option value=AAoption
option value=BBoption option value=ABABoption
option value=OOoption select
td tr
tr tdnbsp;td
td align=rightinput class=tombol type=submit value=Kirimtd
tr tr
tdnbsp;td td align=rightinput class=tombol type=reset
value=Resettd tr
table form
div body
html 7. Proses BukuTamu
?php
Universitas Sumatera Utara
include ..koneksi.php; tanggal_pesan = dateY-n-d;
nama
= _POST[nama]; nik
= _POST[nik]; telepon
= _POST[telepon]; pesan
= _POST[pesan]; query_insert = INSERT INTO tbl_bukutamu
tanggal_pesan, nama,
nik, telepon,
pesan VALUES
tanggal_pesan, nama,
nik, telepon,
pesan; insert = mysql_queryquery_insert;
ifinsert
{ ?scriptalertPesan Anda telah terkirim;script?php
?scriptdocument.location.href=..index.php;script?php }
else {
?scriptalertPesan Gagal dikirim;script?php ?scriptdocument.location.href=..index.php;script?php
} ?
8. Proses KK ?php
include ..koneksi.php;
Universitas Sumatera Utara
tanggal_daftar = dateY-n-d;
namalengkap = _POST[namalengkap];
nikpemohon = _POST[nikpemohon];
namakk = _POST[namakk];
nomorkk = _POST[nomorkk];
alamat = _POST[alamat];
namalama = _POST[namalama];
alamatlama = _POST[alamatlama];
alasan = _POST[alasan];
anggotakeluarga = _POST[anggotakeluarga];
telepon = _POST[telepon];
query_insert = INSERT INTO tbl_kartukeluarga
tanggal_daftar, namalengkap,
nikpemohon, namakk,
nomorkk, alamat,
namalama, alamatlama,
alasan, anggotakeluarga,
telepon VALUES
tanggal_daftar, namalengkap,
nikpemohon, namakk,
nomorkk, alamat,
namalama, alamatlama,
alasan, anggotakeluarga,
telepon;
insert = mysql_queryquery_insert; ifinsert
Universitas Sumatera Utara
{ ?scriptalertData Anda telah terkirim;script?php
?scriptdocument.location.href=..index.php;script?php }
else {
?scriptalertData Anda Gagal dikirim;script?php ?scriptdocument.location.href=..index.php;script?php
} ?
9. Proses KTP ?php
