LISTING PROGRAM. <link rel="stylesheet" href=" ize/5.0.0/normalize.min.css">

Size: px
Start display at page:

Download "LISTING PROGRAM. <link rel="stylesheet" href=" ize/5.0.0/normalize.min.css">"

Transcription

1 LISTING PROGRAM 1. Indeks.php <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="x-ua- Compatible" content="ie=edge,chrome=1" /> <meta charset="utf-8" /> <title>form Login</title> <meta name="description" content="user login page" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <!-- bootstrap & fontawesome -- > href="assets/css/bootstrap.min.css" /> href="assets/font-awesome/4.5.0/css/fontawesome.min.css" /> <!-- text fonts --> href="assets/css/fonts.googleapis.com.css" /> <!-- ace styles --> href="assets/css/ace.min.css" /> <!--[if lte IE 9]> href="assets/css/ace-part2.min.css" /> <![endif]--> href="assets/css/ace-rtl.min.css" /> <!--[if lte IE 9]> href="assets/css/ace-ie.min.css" /> <![endif]--> <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --> <!--[if lte IE 8]> src="assets/js/html5shiv.min.js"></script> src="assets/js/respond.min.js"></script> <![endif]--> nk href=' n+sans:400,700' rel='stylesheet' type='text/css'> href="//maxcdn.bootstrapcdn.com/fontawesome/4.3.0/css/font-awesome.min.css"> href=" ize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-family: "Open Sans", sans-serif; height: 100vh; background: url('assets/images/background.gif') 50% fixed; background-size: spinner { 0% { transform: rotatez(0deg 100% { transform: rotatez(359deg * { box-sizing: border-box;.wrapper { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 20px; background: rgba(4, 40, 68, 0.85.login { border-radius: 2px 2px 5px 5px; padding: 10px 20px 20px 20px; width: 90%; max-width: 320px; background: #ffffff; position: relative; padding-bottom: 80px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3

2 .login.loading button { max-height: 100%; padding-top: 50px;.login.loading button.spinner { opacity: 1; top: 40%;.login.ok button { background-color: #8bc34a;.login.ok button.spinner { border-radius: 0; border-top-color: transparent; border-right-color: transparent; height: 20px; animation: none; transform: rotatez(-45deg.login input { display: block; padding: 15px 10px; margin-bottom: 10px; width: 100%; border: 1px solid #ddd; transition: border-width 0.2s ease; border-radius: 2px; color: #ccc;.login input + i.fa { color: #fff; font-size: 1em; position: absolute; margin-top: -47px; opacity: 0; left: 0; transition: all 0.1s ease-in;.login input:focus { outline: none; color: #444; border-color: #2196F3; border-left-width: 35px;.login input:focus + i.fa { opacity: 1; left: 30px; transition: all 0.25s ease-out;.login a { font-size: 0.8em; color: #2196F3; text-decoration: none;.login.title { color: #444; font-size: 1.2em; font-weight: bold; margin: 10px 0 30px 0; border-bottom: 1px solid #eee; padding-bottom: 20px;.login button { width: 100%; height: 100%; padding: 10px 10px; background: #2196F3; color: #fff; display: block; border: none; margin-top: 20px; position: absolute; left: 0; bottom: 0; max-height: 60px; border: 0px solid rgba(0, 0, 0, 0.1 border-radius: 0 0 2px 2px; transform: rotatez(0deg transition: all 0.1s ease-out; border-bottom-width: 7px;.login button.spinner { display: block; width: 40px; height: 40px; position: absolute; border: 4px solid #ffffff; border-top-color: rgba(255, 255, 255, 0.3 border-radius: 100%; left: 50%; top: 0; opacity: 0; margin-left: -20px; margin-top: -20px; animation: spinner 0.6s infinite linear; transition: top 0.3s 0.3s ease, opacity 0.3s 0.3s ease, border-radius 0.3s ease; box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2.login:not(.loading) button:hover { box-shadow: 0px 1px 3px #2196F3;.login:not(.loading) button:focus { border-bottom-width: 4px; footer { display: block; padding-top: 50px; text-align: center; color: #ddd; font-weight: normal;

3 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2 font-size: 0.8em; footer a, footer a:link { color: #fff; text-decoration: none; <!-- <![endif]--> <!--[if IE]> src="assets/js/jquery min.js"></script> <![endif]--> </style> src=" e/1.0.7/prefixfree.min.js"></script> </head> <body> <div class="wrapper"> <div class="center"> <h1> <i class="ace-icon fa fa-desktop blue"></i> <span class="red">aplikasi</span> <span class="white" id="">pokpppk</span> </h1> <form class="login" method="post" action="proses-login.php"> <img src="assets/images/logopusri.png" width="70%" class="center"> <p class="title" align="center">log in</p> <input type="text" name="username" placeholder="username" autofocus/> <i class="fa fa-user"></i> <input type="password" name="password" placeholder="password" /> <i class="fa fa-key"></i> <button type="submit"> <i class="spinner"></i> <span class="state">log in</span> </button> </form> <footer><a target="blank" href="#">riky Yudistira Copyright 2017</footer> </p> src=' <!-- src="assets/js/index.js"></script> --> <!--[if!ie]> --> src="assets/js/jquery min.js"></script> </body> </html> 2. Proses-ogin.php include'koneksi.php'; session_start( if(empty($_post['username'])): echo ">alert('maaf,periksa Username anda.'history.go(-1</script>"; elseif(empty($_post['password'])): echo ">alert('maaf,periksa Password anda.'history.go(-1</script>"; $perintah_query=mysql_query(" SELECT * FROM user WHERE username = '$_POST[username]' AND password = md5( '$_POST[password]' ) " if($hasil_cek=mysql_num_rows($perintah _query)) { //sukess $datauser=mysql_fetch_array($perintah_q uery $_SESSION['id_user'] = $datauser['id_user']; $_SESSION['user'] = $datauser['username']; $_SESSION['nama'] = $datauser['nama']; $_SESSION['departemen'] = $datauser['departemen']; $_SESSION['level'] = $datauser['level']; echo $_SESSION['level']; header("location:menu.php" else{ echo ">alert('maaf, Username atau Password Anda Salah!'history.go(-1</script>"; 3. Konesi.php

4 $mysql_user="root"; $mysql_password=""; $mysql_database="pengajuan"; $mysql_host="localhost"; $koneksi_db = mysql_connect($mysql_host, $mysql_user, $mysql_password mysql_select_db($mysql_database, $koneksi_db error_reporting(e_strict ~E_NOTICE define( 'VALIDASI', 1 define("vic_mdp","anton Pambudi" define("m_dept","habibullah" define("m_dept_ti","ramadhan Alviansyah" define("direktur_mdp","alexander Kurniawan" define("superint","apep Suprapto" date_default_timezone_set('asia/jakarta' $tanggal= mktime(date("m"),date("d"),date("y") $tglsekarang = date("y-m-d", $tanggal 4. Logout.php session_start( header("location: index.php" session_destroy( break; 5. Menu.php session_start( include 'koneksi.php'; <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="x-ua- Compatible" content="ie=edge,chrome=1" /> <meta charset="utf-8" /> <title>aplikasi POKPPK</title> <meta name="description" content="overview & stats" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <!-- bootstrap & fontawesome -- > href="assets/css/bootstrap.min.css" /> href="assets/font-awesome/4.5.0/css/fontawesome.min.css" /> > <!-- page specific plugin styles -- <!-- text fonts --> href="assets/css/fonts.googleapis.com.css" /> <!-- ace styles --> href="assets/css/ace.min.css" class="ace-mainstylesheet" id="main-ace-style" /> <!--[if lte IE 9]> href="assets/css/ace-part2.min.css" class="acemain-stylesheet" /> <![endif]--> href="assets/css/ace-skins.min.css" /> href="assets/css/ace-rtl.min.css" /> <!--[if lte IE 9]> href="assets/css/ace-ie.min.css" /> <![endif]--> page --> <!-- inline styles related to this <!-- ace settings handler --> src="assets/js/aceextra.min.js"></script> <!-- calendar --> nk type="text/css" href="assets/css/jquery-ui custom.css" rel="stylesheet" /> type="text/javascript" src="assets/js/jquery min.js"></script> type="text/javascript" src="assets/js/jqueryui custom.min.js"></script> type="text/javascript" src="assets/js/date.js"></script> <!-- //calendar --> </head> <body class="no-skin"> <div id="navbar" class="navbar navbar-default ace-save-state"> <div class="navbarcontainer ace-save-state" id="navbar-container"> <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" datatarget="#sidebar">

5 class="sr-only">toggle sidebar</span> <span class="icon-bar"></span> class="icon-bar"></span> class="icon-bar"></span> <span <span <span </button> <ul class="user-menu dropdownmenu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> > href="menu.php?p=profile-edit"> <a class="navbar-header pull-left"> <div href="index.html" class="navbar-brand"> <small> <i class="ace-icon fa fadesktop"></i> Aplikasi POKPPPK <a class="ace-icon fa fa-user"></i> Password <i Ganti </small> class="divider"> <div role="navigation" style="float:right;"> class="nav ace-nav"> <ul href="logout.php"> > <a class="light-blue dropdown-modal"> <a data-toggle="dropdown" href="#" class="dropdown-toggle"> <img class="nav-userphoto" src="assets/images/1.jpg" /> class="ace-icon fa fa-power-off"></i> Logout <i <span class="userinfo"> </ul> <small>welcome,</small> echo $_SESSION['nama'] </span> </ul> <!-- /.navbarcontainer --> <i class="ace-icon fa facaret-down"></i> <div class="main-container acesave-state" id="main-container"> type="text/javascript">

6 try{ace.settings.loadstate('maincontainer')catch(e){ </script> <div id="sidebar" class="sidebar responsive ace-save-state"> type="text/javascript"> e){ try{ace.settings.loadstate('sidebar')catch( </script> <ul class="submenu"> <a href="menu.php?p=user-view"> <i class="menu-icon fa fa-caret-right"></i> User nav-list"> class="active"> <ul class="nav <b class="arrow"></b> <a href="menu.php?p=home"> <i class="menu-icon fa fatachometer"></i> Dashboard </span> <b class="arrow"></b> if($_session['level']=='vic_mdp'){ <a href="#" class="dropdown-toggle"> </ul> <ul class="submenu"> <a href="menu.php?p=asset-view"> <i class="menu-icon fa fa-caret-right"></i> Komputer Asset <b class="arrow"></b> <i class="menu-icon fa falist"></i> Master Data </span> </ul> <b class="arrow fa fa-angledown"></b> <i class="menu-icon fa falist"></i> <a href="menu.php?p=pppk-konfirmasi"> <b class="arrow"></b> Konfirmasi PPPK</span>

7 <i class="menu-icon fa falist"></i> POK</span> <a href="menu.php?p=pok-view"> <i class="menu-icon fa faprint"></i> </span> <b class="arrow fa fa-angledown"></b> Data <a href="#" class="dropdown-toggle"> Cetak </ul> <ul class="submenu"> <a href="menu.php?p=pok-laporan"> <i class="menu-icon fa fa-caret-right"></i> </ul> if($_session['level']=='user'){ Data POK <b class="arrow"></b> <a href="menu.php?p=pppk-view"> <b class="arrow"></b> <ul class="submenu"> <a href="menu.php?p=pppk-laporan"> <i class="menu-icon fa falist"></i> PPPK</span> Data <i class="menu-icon fa fa-caret-right"></i> Data PPPK <b class="arrow"></b> <i class="menu-icon fa fahistory"></i> <a href="menu.php?p=pppk-history"> History Data PPPK</span>

8 if($_session['level']=='m_dept'){ <i class="menu-icon fa falist"></i> <a href="menu.php?p=pppk-konfirmasi"> Konfirmasi PPPK</span> <i class="menu-icon fa fahistory"></i> <a href="menu.php?p=pppk-history"> History Data PPPK</span> if($_session['level']=='direktur_mdp'){ <i class="menu-icon fa falist"></i> <a href="menu.php?p=pok-konfirmasi"> Konfirmasi Data POK</span> <a href="menu.php?p=pok-history"> <i class="menu-icon fa fahistory"></i> History</span> if($_session['level']=='m_dept_ti'){ <i class="menu-icon fa falist"></i> <a href="menu.php?p=pok-konfirmasi"> Konfirmasi Data POK</span> <i class="menu-icon fa fahistory"></i> History</span> <a href="menu.php?p=pok-history"> if($_session['level']=='superint'){ <i class="menu-icon fa falist"></i> <a href="menu.php?p=pok-konfirmasi"> Konfirmasi Data POK</span>

9 <a href="menu.php?p=pok-history"> <!-- /.page-content --> <!-- /.maincontent --> <i class="menu-icon fa fahistory"></i> History</span> class="footer-inner"> class="footer-content"> <div class="footer"> <div <div </ul><!-- /.navlist --> <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> <i id="sidebar-toggle-icon" class="ace-icon fa faangle-double-left ace-save-state" data-icon1="aceicon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> <div class="maincontent"> <div class="main-content-inner"> include 'include/page.php'; <div class="page-content"> if(!empty($_get['p'])) { if(file_exists("file/$_get[p].php")) { include("file/$_get[p].php" else { echo "Error!<br/>Halaman tidak ditemukan!!!"; else { include 'file/home.php'; <span class="bigger-120"> <span class="blue bolder">pokppk</span> </span> Application 2017 <a href="#" id="btnscroll-up" class="btn-scroll-up btn btn-sm btninverse"> <i class="aceicon fa fa-angle-double-up icon-only bigger- 110"></i> <!-- /.main-container --> <!-- basic scripts --> <!--[if!ie]> --> src="assets/js/jquery min.js"></script> <!-- <![endif]--> <!--[if IE]> src="assets/js/jquery min.js"></script> <![endif]--> type="text/javascript"> if('ontouchstart' in document.documentelement) document.write(" src='assets/js/jquery.mobile.custom.min.js'>"+"<"+ "/script>" </script>

10 src="assets/js/bootstrap.min.js"></script> <!-- page specific plugin scripts - -> src="assets/js/jquery.datatables.min.js"></script> src="assets/js/jquery.datatables.bootstrap.min.js"> </script> src="assets/js/datatables.buttons.min.js"></script> src="assets/js/buttons.flash.min.js"></script> src="assets/js/buttons.html5.min.js"></script> src="assets/js/buttons.print.min.js"></script> src="assets/js/buttons.colvis.min.js"></script> src="assets/js/datatables.select.min.js"></script> <!-- ace scripts --> src="assets/js/aceelements.min.js"></script> src="assets/js/ace.min.js"></script> include 'include/search-table.php'; <!-- inline scripts related to this page --> </body> </html> 6. Aset-simpan.php if($_session['level']=='vic_mdp') { $no_asset = $_POST['no_asset']; $jenis_asset= 'PC'; $departemen = $_POST['departemen']; $spesifikasi = 'Standar'; $os = $_POST['os']; //panggil data $sql="select * from asset where no_asset ='$no_asset'"; $proses=mysql_query($sql $data=mysql_fetch_array($proses $kode = mysql_num_rows($proses if ($kode==''){ if(empty($no_asset)): echo ">alert('no Asset Tidak Boleh Kosong.'location.href='menu.php?p=assetview';</script>"; $sqlsave = "INSERT INTO asset SET no_asset = '$no_asset', jenis_asset = '$jenis_asset', departemen = '$departemen', spesifikasi = '$spesifikasi', os = '$os'"; if($querysave): echo ">alert('data berhasil disimpan.'location.href='menu.php?p=assetview';</script>"; echo ">alert('data gagal disimpan.'history.go(-1</script>"; else { echo ">alert('no Asset Komputer ($no_asset) Sudah Ada.'location.href='menu.php?p=assettambah';</script>"; else{ echo ' language="javascript">alert("tidak 7. Aset-update.php if($_session['level']=='vic_mdp') { $no_asset = $_POST['no_asset']; $departemen = $_POST['departemen'];

11 $os = $_POST['os']; $sqlsave = "update asset SET departemen = '$departemen', '$os' where no_asset='$no_asset'"; os = if($querysave): echo ">alert('perubahan berhasil disimpan.'location.href='menu.php?p=assetview';</script>"; echo ">alert('perubahan gagal disimpan.'history.go(-1</script>"; else{ echo ' language="javascript">alert("tidak 8. Aset-hapus.php if($_session['level']=='vic_mdp') { $sql_hapus=mysql_query("delete from asset where no_asset='$_get[id]'" if($sql_hapus): echo ">alert('data Berhasil dihapus'location.href='menu.php?p=assetview';</script>"; echo ">alert('data Gagal dihapus!'history.go(-1';</script>"; else{ echo ' language="javascript">alert("tidak 9. Pok-cetak.php ob_start( include ('../koneksi.php' include ("../mpdf/mpdf.php" $mpdf=new mpdf('c','a4-l',8,'times New Roman' $mpdf->mirrormargins = true; $mpdf->setdisplaymode('fullpage','two' $data_pok=mysql_fetch_array(mysql_query("selec t * from pok where no_pok='$_get[id]'") $data_pppk=mysql_fetch_array(mysql_query("sele ct * from pppk where id_pppk='$data_pok[id_pppk]'") $data_unit=mysql_fetch_array(mysql_query("selec t * from user where id_user='$data_pppk[id_user]'") $data_asset=mysql_fetch_array(mysql_query("sele ct * from asset where no_asset='$data_pppk[no_asset]'") $date1 = date_create($data_pppk['tanggal_penyerahan'] $tanggal_penyerahan=date_format($date1, 'd M Y' $vic_mdp=vic_mdp; $m_dept_ti=m_dept_ti; $direktur_mdp=direktur_mdp; $superint=superint; $bu=buka($wh $html =" <table width=100%> <th width=19% rowspan=3 scope=col valign=top><img src=../assets/images/logopusri.png width=200px height=60px></th> <th width=32% rowspan=3 scope=col class=center valign=top>permintaan ORDER KERJA PERBAKIAN <br> PERANGKAT KOMPUTER </th> <td width=10% valign=top>hardware</td> <td width=16% valign=top>: $data_asset[jenis_asset]</td> <td width=9% valign=top>no POK </td> <td width=14% valign=top>: $data_pok[no_pok]</td> <tr valign=top> <td width=10% rowspan=2 valign=top>no Asset </td> <td width=16% rowspan=2 valign=top>: $data_asset[no_asset]</td> <td valign=top>unit Kerja </td> <td valign=top>: $data_unit[departemen]</td> <td valign=top>no PPPK </td> <td valign=top>: $data_pppk[id_pppk]</td> <img src=../assets/images/garis.png>

12 <br> <table width=100% border=1> <th align=center>no</th> <th>rincian KERUSAKAN</th> <th>rincian PERBAIKAN</th> <th>suku CADANG YANG DIGANTI</th> $bu <br> <table width=100% border=1> <th width=26% rowspan=2 scope=col> Diserahkan Oleh <br> Departemen TI <br><br> Tgl. : $tanggal_penyerahan <br><br><img src=../assets/images/check.png width=60px; height=25px><br> <u>$m_dept_ti</u> <br> Manager TI </th> <th width=29% rowspan=2 scope=col> Diterima Oleh <br> PT. Multi Data Pelembang <br><br><br><br><img src=../assets/images/check.png width=60px; height=25px><br> <u>$direktur_mdp</u> <br> Direktur MDP </th> <td colspan=2> Diserahkan Kembali Kepada : Departemen TI<br> Tanggal : $tanggal_penyerahan </td> <th width=20% scope=col> Yang Menyerahkan <br> PT.Multi Data Palembang <br><br><img src=../assets/images/check.png width=60px; height=25px><br> <u>$vic_mdp</u> <br> VIC MDP </th> <th width=25% scope=col> Yang Menerima <br> Superint. Pemel. Komputer <br> dan Komunikasi Data <br><img src=../assets/images/check.png width=60px; height=25px><br> <u>$data_unit[nama]</u> <br> Penerima </th> "; $mpdf->writehtml($html $mpdf->output('pok','i' exit; function buka($wh){ $sql_tbldata=("select * from pok where no_pok='$_get[id]' order by id_pok asc" $i=1; $psn=mysql_query($sql_tbldata) or die (mysql_error() while($data=mysql_fetch_object($psn)){ $x="$x <tr style=background-color:#fff;> <td style='text-align:center; font-size:11px; color:black;'>$i</td> <td style='text-align:center; font-size:11px; color:black;'>$data->rincian_kerusakan</td> <td style='text-align:center; font-size:11px; color:black;'>$data->rincian_perbaikan</td> <td style='text-align:center; font-size:11px; color:black;'>$data->suku_cadang_diganti</td> "; $i++; return $x; 10. Pok-simpan.php if($_session['level']=='vic_mdp') { $id_pppk= $_POST['id_pppk']; $no_pok= $_POST['no_pok']; $tanggal_pok= $tglsekarang; $no_asset= $_POST['no_asset']; $rk = $_POST['rk']; $rp = $_POST['rp']; $sc = $_POST['sc']; $jum_data=array($rk,$rp,$sc $jum_d= max($jum_data for ($x=0;$x<$jum_d;$x++){ $a=$_post['rincian_kerusakan'][$x]; $b=$_post['rincian_perbaikan'][$x]; $c=$_post['suku_cadang_diganti'][$x];

13 $sqlsave = "INSERT INTO pok SET id_pok = '', id_pppk = '$id_pppk', no_pok = '$no_pok', tanggal_pok = '$tglsekarang', no_asset = '$no_asset', rincian_kerusakan = '$a', rincian_perbaikan = '$b', suku_cadang_diganti = '$c', konfirmasi_m_dept_ti = '', konfirmasi_direktur_mdp = '', konfirmasi_vic_mdp = 'Yes', konfirmasi_superint = '', status = ''"; $sqlsave = "Update pppk SET status = 'Diproses' where id_pppk='$id_pppk'"; if($querysave): echo ">alert('data berhasil disimpan.'location.href='menu.php?p=pokview';</script>"; echo ">alert('data gagal disimpan'history.go(-1</script>"; else{ echo ' language="javascript">alert("tidak 11. Pok-terima-simpan.php if($_session['level']=='direktur_mdp' $_SESSION['level']=='m_dept_ti' $_SESSION['level']=='superint') { $id_pppk= $_POST['id_pppk']; $id_pok= $_POST['id_pok']; $jum_d = count($id_pok for ($x=0;$x<$jum_d;$x++){ $a=$_post['id_pok'][$x]; if($_session['level']=='direktur_mdp') { $sqlsave = "UPDATE pok SET konfirmasi_direktur_mdp = 'Yes' where id_pok='$a'"; if($_session['level']=='m_dept_ti') { $sqlsave = "UPDATE pok SET konfirmasi_m_dept_ti = 'Yes' where id_pok='$a'"; if($_session['level']=='superint') { $sqlsave = "UPDATE pok SET konfirmasi_superint = 'Yes', status = 'Selesai' where id_pok='$a'"; if($_session['level']=='superint') { $sqlsave = "UPDATE pppk SET = 'Selesai' where id_pppk='$id_pppk'"; if($querysave): echo ">alert('data berhasil disimpan.'location.href='menu.php?p=pokkonfirmasi';</script>"; echo ">alert('data gagal disimpan'history.go(-1</script>"; status

14 else{ echo ' language="javascript">alert("tidak 12. Pppk-cetak.php ob_start( include ('../koneksi.php' include ("../mpdf/mpdf.php" $mpdf=new mpdf('c','a4',8,'times New Roman' $mpdf->mirrormargins = true; $mpdf->setdisplaymode('fullpage','two' $data_pppk=mysql_fetch_array(mysql_query("sele ct * from pppk where id_pppk='$_get[id]'") $data_user=mysql_fetch_array(mysql_query("selec t * from user where id_user='$data_pppk[id_user]'") $data_asset=mysql_fetch_array(mysql_query("sele ct * from asset where no_asset='$data_pppk[no_asset]'") $date1 = date_create($data_pppk['tanggal_pppk'] $tanggal_pppk=date_format($date1, 'd M Y' $date2 = date_create($data_pppk['tanggal_tindakan'] $tanggal_tindakan=date_format($date2, 'd M Y' $date3 = date_create($data_pppk['tanggal_penyerahan'] $tanggal_penyerahan=date_format($date3, 'd M Y' $vic_mdp=vic_mdp; $m_dept=m_dept; $html =" <table width=100%> <td><img src=../assets/images/logopusri.png width=300px; height=80px></td> <td><img src=../assets/images/garis.png></td> <table width=100%> <td align=center><h3>form PPPK</h3></td> <td align=center><u><h3>permintaan Perbaikan Perangkat Komputer</h3></u></td> <br> <table width=100% border=1> <td width=25%><b>unit Kerja</b></td> <td width=25%>: $data_user[departemen]</td> <td width=25%><b>no PPPK</b></td> <td width=25%>: $data_pppk[id_pppk]</td> <td><b>lokasi</b></td> <td>: $data_user[lokasi]</td> <td><b>tanggal PPPK</b></td> <td>: $tanggal_pppk</td> <td><b>telepon</b></td> <td>: $data_user[telepon]</td> <td><b>penghubung</b></td> <td>: Departemen TI </td> <br> <table width=100% border=1> <tr align=center> <td width=25% align=center><b>hardware</b></td> <td width=25% align=center><b>ni.inv/sn</b></td> <td width=25% align=center><b>aduan Kerusakan oleh User</b></td> <td width=25% align=center><b>pemerikassan oleh staf IT</b></td> <td align=center valign=top>$data_asset[jenis_asset]</td> <td align=center valign=top>$data_asset[no_asset]</td> <td valign=top>$data_pppk[aduan_kerusakan]</td> <td valign=top>$data_pppk[pemeriksaan]</td> <br> <table width=100% border=1> <tr align=center> <td width=33% align=center><b>penerima Aduan <br> <br> <br> <img src=../assets/images/check.png width=60px; height=25px> <br> <br>$vic_mdp</b></td> <td width=34% align=center><b>mengetahui<br>mgr/asm/spv<b r> <br> <img src=../assets/images/check.png width=60px; height=25px> <br> <br>$m_dept</b></td> <td width=33% align=center><b>pemakai<br> <br> <br> <img src=../assets/images/check.png

15 width=60px; height=25px> <br> <br>$data_user[nama]</b></td> <br> <table width=100% border=1> <tr style=background:#c0c0c0; align=center> <td width=43% align=center><b>tindakan</b></td> <td width=15% align=center><b>tanggal</b></td> <td width=42% align=center><b>hasil</b></td> <td height=90 valign=top>$data_pppk[tindakan]</td> <td align=center valign=top>$tanggal_tindakan</td> <td valign=top>$data_pppk[hasil]</td> <br> <p align=center><b><u>penyerahan KEMBALI PERANGKAT KOMPUTER</u></b></p> <table width=100% border=1> <tr style=background:#c0c0c0; align=center> <td width=25% align=center><b>status</b></td> <td width=25% align=center><b>jenis HARDWARE </b></td> <td width=25% align=center><b>tanggal</b></td> <td width=25% align=center><b>penerima</b></td> <td height=90 align=center>$data_pppk[status]</td> <td align=center>$data_asset[jenis_asset]</td> <td align=center>$tanggal_penyerahan</td> <td valign=bottom align=center><img src=../assets/images/check.png width=60px; height=25px> <br> <br> <br> $data_user[nama]</td> "; $mpdf->writehtml($html $mpdf->output('permintaan','i' exit; 13. Pppk-simpan.php if($_session['level']=='user') { $id_pppk = $_POST['id_pppk']; $id_user = $_POST['id_user']; $no_asset = $_POST['no_asset']; $penghubung = $_POST['penghubung']; $tanggal_pppk = $_POST['tanggal_pppk']; $aduan_kerusakan= $_POST['aduan_kerusakan']; //panggil data $sql="select * from pppk where no_asset ='$no_asset' and status='menunggu'"; $proses=mysql_query($sql $data=mysql_fetch_array($proses $kode = mysql_num_rows($proses if ($kode==''){ $sqlsave = "INSERT INTO pppk SET id_pppk = '$id_pppk', id_user = '$id_user', no_asset = '$no_asset', penghubung = '$penghubung', tanggal_pppk = '$tanggal_pppk', aduan_kerusakan = '$aduan_kerusakan', status = 'Menunggu'"; if($querysave): echo ">alert('data berhasil disimpan.'location.href='menu.php?p=pppkview';</script>"; echo ">alert('data gagal disimpan.'history.go(-1</script>"; else { echo ">alert('tidak Bisa Mengajukan Permintaan, Komputer Masih

16 Diperbaiki'location.href='menu.php?p=pppktambah';</script>"; else{ echo ' language="javascript">alert("tidak 14. Pppk-terima-simpan.php if($_session['level']=='user') { $id_pppk = $_GET['id']; $sqlsave = "UPDATE pppk SET konfirmasi_user = 'Yes', tanggal_penyerahan = '$tglsekarang' where id_pppk='$id_pppk'"; if($querysave): echo ">alert('data berhasil disimpan.'location.href='menu.php?p=pppkview';</script>"; echo ">alert('data gagal disimpan.'history.go(-1</script>"; else{ echo ' language="javascript">alert("tidak 15. Pppk-terima.php if($_session['level']=='m_dept' $_SESSION['level']=='vic_mdp') { if($_session['level']=='m_dept'){ $id_pppk = $_GET['id']; $sqlsave = "update pppk SET konfirmasi_m_dept = 'Yes' where id_pppk='$id_pppk'"; if($_session['level']=='vic_mdp'){ $id_pppk = $_POST['id_pppk']; $pemeriksaan = $_POST['pemeriksaan']; $konfirmasi_vic_mdp = 'Yes'; $tindakan = $_POST['tindakan']; $tanggal_tindakan = $_POST['tanggal_tindakan']; $hasil = $_POST['hasil']; $sqlsave = "update pppk SET pemeriksaan = '$pemeriksaan', konfirmasi_vic_mdp = '$konfirmasi_vic_mdp', '$hasil' tindakan = '$tindakan', tanggal_tindakan = '$tanggal_tindakan', hasil = id_pppk='$id_pppk'"; where if($querysave): echo ">alert('data berhasil diterima.'location.href='menu.php?p=pppkkonfirmasi';</script>"; echo ">alert('data gagal diterima.'history.go(-1</script>"; else{ echo ' language="javascript">alert("tidak 16. Profile-update.php if($_session['level']=='vic_mdp' $_SESSION['level']=='user' $_SESSION['level']=='m_dept'

17 $_SESSION['level']=='m_dept_ti' $_SESSION['level']=='direktur_mdp' $_SESSION['level']=='superint') { //inisialisasi varible yang dikirim dari halaman admin-edit.php $user = $_SESSION['id_user']; $old_password = md5(strip_tags(mysql_real_escape_string($_post ['old_password'])) //echo "<br>"; $confirm_password = md5(strip_tags(mysql_real_escape_string($_post ['confirm_password'])) //echo "<br>"; $new_password = md5(strip_tags(mysql_real_escape_string($_post ['new_password'])) //validasi apakah data kosong atau tidak if(empty($user) or empty($old_password) or empty($confirm_password) or empty($new_password)): echo ">alert('harap isi semua data.'location.href='menu.php?p=profileedit';</script>"; $sqlcek = "SELECT password FROM user WHERE id_user = '$user'"; $querycek = mysql_query($sqlcek list($password) = mysql_fetch_row($querycek if($new_password!= $confirm_password OR $old_password!= $password OR $new_password == $password): echo ">alert('maaf, password konfirmasi password anda tidak valid.'location.href='menu.php?p=profileedit';</script>"; //update data user berdasarkan id yang didapat $sql = "UPDATE user SET password = '$new_password' WHERE id_user = '$user'"; $query = mysql_query($sql if($query): echo ">alert('ganti password berhasil.'location.href='logout.php';</script>"; echo ">alert('ganti password gagal.'location.href='menu.php?p=profileedit';</script>"; else{ echo ' language="javascript">alert("tidak 17. User-hapus.php if($_session['level']=='vic_mdp') { $sql_hapus=mysql_query("delete from user where id_user='$_get[id]'" if($sql_hapus): echo ">alert('data Berhasil dihapus'location.href='menu.php?p=userview';</script>"; echo ">alert('data Gagal dihapus!'history.go(-1';</script>"; else{ echo ' language="javascript">alert("tidak 18. User-simpan.php if($_session['level']=='vic_mdp') { $username = $_POST['username']; $password= $_POST['password']; $nama = $_POST['nama']; $badge = $_POST['badge']; $departemen = $_POST['departemen']; $lokasi = $_POST['lokasi']; $telepon = $_POST['telepon']; $level = $_POST['level']; //panggil data $sql="select * from user where username ='$username' and badge='$badge'"; $proses=mysql_query($sql $data=mysql_fetch_array($proses $kode = mysql_num_rows($proses if ($kode==''){

18 if(empty($username)): echo ">alert('username Tidak Boleh Kosong.'location.href='menu.php?p=userview';</script>"; elseif(empty($password)): echo ">alert('password Tidak Boleh Kosong.'location.href='menu.php?p=userview';</script>"; elseif(empty($nama)): echo ">alert('nama user Tidak Boleh Kosong.'location.href='menu.php?p=userview';</script>"; $sqlsave = "INSERT INTO user SET id_user = '', username = '$username', password = md5('$password'), nama = '$nama', echo ' language="javascript">alert("tidak 19. User-update.php if($_session['level']=='vic_mdp') { $id_user = $_POST['id_user']; $username = $_POST['username']; $nama = $_POST['nama']; $badge = $_POST['badge']; $departemen = $_POST['departemen']; $lokasi = $_POST['lokasi']; $telepon = $_POST['telepon']; $level = $_POST['level']; $sqlsave = "Update user SET badge = '$badge', departemen = '$departemen', lokasi = '$lokasi', telepon = '$telepon', level = '$level'"; username = '$username', = '$nama', = '$badge', departemen = '$departemen', = '$lokasi', nama badge lokasi if($querysave): echo ">alert('data berhasil disimpan.'location.href='menu.php?p=userview';</script>"; echo ">alert('data gagal disimpan.'history.go(-1</script>"; else { echo ">alert('username ($username) Sudah Ada.'location.href='menu.php?p=usertambah';</script>"; else{ telepon = '$telepon', '$level' where id_user='$id_user'"; level = if($querysave): echo ">alert('perubahan berhasil disimpan.'location.href='menu.php?p=userview';</script>"; echo ">alert('perubahan gagal disimpan.'history.go(-1</script>"; else{ echo ' language="javascript">alert("tidak

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows

More information

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information

More information

LAMPIRAN. Index.php. <?php. unset($_session["status"]); //session_destroy(); //session_destroy();

LAMPIRAN. Index.php. <?php. unset($_session[status]); //session_destroy(); //session_destroy(); LAMPIRAN Index.php unset($_session["status"]); //session_destroy(); //session_destroy();?>

More information

HTML HTML5. DOM(Document Object Model) CSS CSS

HTML HTML5. DOM(Document Object Model) CSS CSS HTML HTML5 DOM(Document Object Model) CSS CSS HTML html img jpg png gif jpg png gif

More information

LAMPIRAN. <meta name="description" content="creative - Bootstrap 3 Responsive Admin Template">

LAMPIRAN. <meta name=description content=creative - Bootstrap 3 Responsive Admin Template> LAMPIRAN add_anggota.php(potongan kode untuk menambah anggota) session_start(); if (empty($_session['username'])){ header('location:login.php'); else { include "../koneksi.php";

More information

Pliki.tpl. scripts/search.tpl. Pliki.css. Pliki.less. Dokumentacja zmian plików graficznych: rwd shoper Wersja zmian:

Pliki.tpl. scripts/search.tpl. Pliki.css. Pliki.less. Dokumentacja zmian plików graficznych: rwd shoper Wersja zmian: Dokumentacja zmian plików graficznych: rwd shoper Wersja zmian: 5.8.32-5.8.33 Pliki.tpl scripts/search.tpl - 1

More information

Front-End UI: Bootstrap

Front-End UI: Bootstrap Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com

More information

/* ========================================================================== PROJECT STYLES

/* ========================================================================== PROJECT STYLES html { box-sizing: border-box; *, *:before, *:after { box-sizing: inherit; img { max-width: 100%; border: 0; audio, canvas, iframe, img, svg, video { vertical-align: middle; /* Remove gaps between elements

More information

Listing Program. return false; return true; } </script> </body> </html>

Listing Program. return false; return true; } </script> </body> </html> Listing Program koneksi.php $mysql_user="root"; $mysql_password=""; $mysql_database="korpri"; $mysql_host="localhost"; $koneksi_db = mysql_connect($mysql_host, $mysql_user, $mysql_password); mysql_select_db($mysql_database,

More information

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that define how

More information

5 Snowdonia. 94 Web Applications with C#.ASP

5 Snowdonia. 94 Web Applications with C#.ASP 94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial

More information

CSS: Layout Part 2. clear. CSS for layout and formatting: clear

CSS: Layout Part 2. clear. CSS for layout and formatting: clear CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear

More information

LAMPIRAN Kode Program

LAMPIRAN Kode Program 73 LAMPIRAN Kode Program 1. Index.php

More information

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties

More information

Chapter 7 BMIS335 Web Design & Development

Chapter 7 BMIS335 Web Design & Development Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating

More information

Santa Tracker. Release Notes Version 1.0

Santa Tracker. Release Notes Version 1.0 Santa Tracker Release Notes Version 1.0 App Parameters and Styling In your Caspio account, go to the App s Overview screen and on the right sidebar click on Manage in the App Parameters area. Edit any

More information

Django AdminLTE 2 Documentation

Django AdminLTE 2 Documentation Django AdminLTE 2 Documentation Release 0.1 Adam Charnock Jul 02, 2018 Contents 1 Contents 3 1.1 Quickstart................................................ 3 1.2 Templates & Blocks Reference.....................................

More information

L A M P I R A N. Universitas Sumatera Utara

L A M P I R A N. Universitas Sumatera Utara L A M P I R A N LAMPIRAN 1. Listing Program Aplikasi e-election Berbasis SMS Gateway index.php

More information

Website Development with HTML5, CSS and Bootstrap

Website Development with HTML5, CSS and Bootstrap Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on

More information

Adding CSS to your HTML

Adding CSS to your HTML Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,

More information

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017 ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3 Created: 2/10/2017 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global

More information

Zen Garden. CSS Zen Garden

Zen Garden. CSS Zen Garden CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS

More information

,.., «..»

,.., «..» ,.., 2018. 09.03.03.19 - «..».... 2018 1 : - 39, 5, 1. : -. :,, -,. -.,,. 2 ... 4 1 -. 6 1.1 -... 6 1.2 -... 9 1.3 -... 11 1.4, -... 13 2. - «..»... 16 2.1.... 16 2.2 CMS WordPress... 17 2.3 -... 22...

More information

Lab 1: Introducing HTML5 and CSS3

Lab 1: Introducing HTML5 and CSS3 CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.

More information

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web

More information

Lampiran Source Code:

Lampiran Source Code: Lampiran Source Code: Halaman Login Siswa Sourcecode : @session_start(); $db = mysqli_connect("localhost", "root", "", "learning");

More information

Signs of Spring App. Release Notes Version 1.0

Signs of Spring App. Release Notes Version 1.0 Signs of Spring App Release Notes Version 1.0 App Parameters and Styling In your Caspio account, go to the App s Overview screen. On the right sidebar, click on Manage in the App Parameters area. Edit

More information

CSS Selectors. element selectors. .class selectors. #id selectors

CSS Selectors. element selectors. .class selectors. #id selectors CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors

More information

CSC309 Programming on the Web week 3: css, rwd

CSC309 Programming on the Web week 3: css, rwd CSC309 Programming on the Web week 3: css, rwd Amir H. Chinaei, Spring 2017 Office Hours: M 3:45-5:45 BA4222 ahchinaei@cs.toronto.edu http://www.cs.toronto.edu/~ahchinaei/ survey 1 in survey 1, you provide

More information

CSS (Cascading Style Sheets): An Overview

CSS (Cascading Style Sheets): An Overview CSS (Cascading Style Sheets): An Overview CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that

More information

CSS. Shan-Hung Wu CS, NTHU

CSS. Shan-Hung Wu CS, NTHU CSS Shan-Hung Wu CS, NTHU CSS Zen Garden 2 Outline The Basics Selectors Layout Stacking Order 3 Outline The Basics Selectors Layout Stacking Order 4 Grammar selector { property: value; 5 Example /* for

More information

<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***

<style type=text/css> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page*** Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

Building Page Layouts

Building Page Layouts Building Page Layouts HTML & CSS From Scratch Slides 3.1 Topics Display Box Model Box Aesthetics Float Positioning Element Display working example at: h9ps://;nker.io/3a2bf Source: unknown. Please contact

More information

Showing results for contents of text-input area - Nu Html Checker

Showing results for contents of text-input area - Nu Html Checker Nu Html Checker This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change Showing results for contents of text-input area Checker Input Show source outline

More information

Introduction to HTML & CSS. Instructor: Beck Johnson Week 5

Introduction to HTML & CSS. Instructor: Beck Johnson Week 5 Introduction to HTML & CSS Instructor: Beck Johnson Week 5 SESSION OVERVIEW Review float, flex, media queries CSS positioning Fun CSS tricks Introduction to JavaScript Evaluations REVIEW! CSS Floats The

More information

Psychology Experiments on the Web Using PHP and MySQL

Psychology Experiments on the Web Using PHP and MySQL Psychology Experiments on the Web Using PHP and MySQL Lisa M. DeBruine August 14, 2008 Contents 1 Basic Web Authoring 2 1.1 Setting up your webpage....................... 2 1.2 HTML.................................

More information

WEBSI TE DESIGNING TRAINING

WEBSI TE DESIGNING TRAINING WEBSI TE DESIGNING TRAINING WHAT IS WEB DESIGN? We b s ite design m e a n s p l a n n i n g, c r e a t i o n and u p d a t i n g of websites. We bsite design also involves i n f o r m a t i o n a rchitecture,

More information

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question

More information

Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015

Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015 Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS 8 Oct 2015 What is CSS? o CSS (Style Sheet) defines how HTML elements are formatted and displayed. o It helps you easily change an HTML

More information

Bootstrap Carousel. jquery Image Sliders

Bootstrap Carousel. jquery Image Sliders Bootstrap Carousel jquery Image Sliders Bootstrap Carousel Carousel bootstarp css js jquery js bootstrap.js http://getbootstrap.com/javascript/#carousel item ol.carousel-indicators li

More information

CSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax

CSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets

More information

CSS: The Basics CISC 282 September 20, 2014

CSS: The Basics CISC 282 September 20, 2014 CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML

More information

src1-malan/ajax/ajax1.html ajax1.html Gets stock quote from quote1.php via Ajax, displaying result with alert().

src1-malan/ajax/ajax1.html ajax1.html Gets stock quote from quote1.php via Ajax, displaying result with alert(). src1-malan/ajax/ajaxhtml 1 1 1 1 1 2 2 2 2 2 2 2 2 30. 3 3 3 3 3 3 3 3 3 40. 4 4 4 4 4 4 4 4 ajaxhtml Gets stock quote from quotephp via Ajax, displaying result with alert(). Building Mobile Applications

More information

Web Development and HTML. Shan-Hung Wu CS, NTHU

Web Development and HTML. Shan-Hung Wu CS, NTHU Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does Internet Work? Web Development HTML Block vs. Inline elements Lists Links and Attributes Tables Forms 2 Outline How does Internet Work? Web

More information

Module 2 (VII): CSS [Part 4]

Module 2 (VII): CSS [Part 4] INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals

More information

Create First Web Page With Bootstrap

Create First Web Page With Bootstrap Bootstrap : Responsive Design Create First Web Page With Bootstrap 1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. 2. Bootstrap 3 is mobile-first

More information

Lab 7 Introduction to MySQL

Lab 7 Introduction to MySQL Lab 7 Introduction to MySQL Objectives: During this lab session, you will - Learn how to access the MySQL Server - Get hand-on experience on data manipulation and some PHP-to-MySQL technique that is often

More information

Session 4. Style Sheets (CSS) Reading & References. A reference containing tables of CSS properties

Session 4. Style Sheets (CSS) Reading & References.   A reference containing tables of CSS properties Session 4 Style Sheets (CSS) 1 Reading Reading & References en.wikipedia.org/wiki/css Style Sheet Tutorials www.htmldog.com/guides/cssbeginner/ A reference containing tables of CSS properties web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html

More information

Chapter 4 CSS basics

Chapter 4 CSS basics Sungkyunkwan University Chapter 4 CSS basics Prepared by J. Lee and H. Choo Web Programming Copyright 2000-2018 Networking Laboratory 1/48 Copyright 2000-2012 Networking Laboratory Chapter 4 Outline 4.1

More information

Basic CSS Lecture 17

Basic CSS Lecture 17 Basic CSS Lecture 17 Robb T. Koether Hampden-Sydney College Wed, Feb 21, 2018 Robb T. Koether (Hampden-Sydney College) Basic CSSLecture 17 Wed, Feb 21, 2018 1 / 22 1 CSS 2 Background Styles 3 Text Styles

More information

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Mendel Rosenblum 1 Driving problem behind CSS What font type and size does introduction generate? Answer: Some default from the browser (HTML tells what browser how)

More information

CSS: formatting webpages

CSS: formatting webpages CSS: formatting webpages Why CSS? separate content from formatting (style) style can be changed easily without rewriting webpages keep formatting consistent across website allows more advanced formatting

More information

Produced by. Agile Software Development. Eamonn de Leastar

Produced by. Agile Software Development. Eamonn de Leastar Agile Software Development Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie Pacemaker

More information

Introduction to using HTML to design webpages

Introduction to using HTML to design webpages Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the

More information

PROJECT ON EMPLOYEE DATABASE AND PAYROLL MANAGEMENT SYSTEM

PROJECT ON EMPLOYEE DATABASE AND PAYROLL MANAGEMENT SYSTEM PROJECT ON EMPLOYEE DATABASE AND PAYROLL MANAGEMENT SYSTEM REPORT OF MAJOR PROJECT SUBMITTED FOR FULFILLMENT OF THE REQUIREMENT FOR THE DEGREE OF MASTER IN COMPUTER APPLICATION MARCUS ATISH D ROZARIO REGISTRATION

More information

CSS3 Basics. From & CSS Visual Dictionary Learning Curve Books, LLC

CSS3 Basics. From   & CSS Visual Dictionary Learning Curve Books, LLC CSS3 Basics From www.w3schools.com & CSS Visual Dictionary Learning Curve Books, LLC CSS Box Model Margin (top, right, bottom, left) Shorthand property, equivalent to Border-width border-style border-color

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with

More information

Environmental Sanitation Management Information System - ESMIS

Environmental Sanitation Management Information System - ESMIS Environmental Sanitation Management Information System - ESMIS System Manual Contents 1 General Information... 1 1.1 System Overview... 1 1.2 Organization of the Manual... 1 1.3 User Access Level... 2

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css CLASS :: 12 05.04 2018 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

NAVIGATION INSTRUCTIONS

NAVIGATION INSTRUCTIONS CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU

More information

Parashar Technologies HTML Lecture Notes-4

Parashar Technologies HTML Lecture Notes-4 CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,

More information

CSS often uses hyphens in CSS property names but JavaScript uses camel case, e.g. color: blue; p { <!DOCTYPE html> <meta charset="utf-8" /> <head>

CSS often uses hyphens in CSS property names but JavaScript uses camel case, e.g. color: blue; p { <!DOCTYPE html> <meta charset=utf-8 /> <head> 1 of 9 CS1116/CS5018 Web Development 2 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Recap To find nodes: queryselector, queryselectorall To create new element

More information

2004 WebGUI Users Conference

2004 WebGUI Users Conference WebGUI Site Design 2004 WebGUI Users Conference General Rules of Web Design Content is King good content is more important than anything else. keeps people interested. even if your design is bad, content

More information

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6 CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r

More information

Purpose of this doc. Most minimal. Start building your own portfolio page!

Purpose of this doc. Most minimal. Start building your own portfolio page! Purpose of this doc There are abundant online web editing tools, such as wordpress, squarespace, etc. This document is not meant to be a web editing tutorial. This simply just shows some minimal knowledge

More information

Creating HTML files using Notepad

Creating HTML files using Notepad Reference Materials 3.1 Creating HTML files using Notepad Inside notepad, select the file menu, and then Save As. This will allow you to set the file name, as well as the type of file. Next, select the

More information

Stamp Builder. Documentation. v1.0.0

Stamp  Builder. Documentation.   v1.0.0 Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0 THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you

More information

Downloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -

Downloads: Google Chrome Browser (Free) -   Adobe Brackets (Free) - Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will

More information

Creating Dashboards and Components

Creating Dashboards and Components Creating Dashboards and Components ** The Guide shows SupportDesk with 2018 Styling in place. Dashboard Forms provide the functionality for you to alter landing screen for SupportDesk users, whether Service

More information

Building beautiful websites with Bootstrap: A case study. by Michael Kennedy michaelckennedy.net

Building beautiful websites with Bootstrap: A case study. by Michael Kennedy michaelckennedy.net Building beautiful websites with Bootstrap: A case study by Michael Kennedy DevelopMentor @mkennedy michaelckennedy.net Objectives Learn what Bootstrap has to offer web developers Install and use Bootstrap

More information

Cascading Style Sheet. Styles as Tag Attributes. Syntax. <h1>: what font type/size is used? STYLE = SELECTOR {RULES} Attributes such as bgcolor

Cascading Style Sheet. Styles as Tag Attributes. Syntax. <h1>: what font type/size is used? STYLE = SELECTOR {RULES} Attributes such as bgcolor Styles? Cascading Style Sheet http://www.eie.polyu.edu.hk/~nflaw/biclustering/index.html Request string: GET /~nflaw/biclustering/index.html HTTP/1.1 Host: www.eie.polyu.edu.hk 1 Response string: HTTP/1.1

More information

Bootstrap 1/20

Bootstrap 1/20 http://getbootstrap.com/ Bootstrap 1/20 MaxCDN

More information

Cascading Style Sheets Level 2

Cascading Style Sheets Level 2 Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin

More information

CSS Futures. Web Development

CSS Futures. Web Development CSS Futures Web Development CSS Futures CSS3 CSS Preprocessors: SASS & LESS CSS Frameworks CSS3 CSS3 is the latest standard for CSS Combined with HTML5, CSS3 makes it possible to create highly interactive

More information

WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310

WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 Project #4 Updating your class project to be more mobile friendly To gain a fuller appreciate for Responsive Design, please review Chapter 8. Another great

More information

Lab 4 CSS CISC1600, Spring 2012

Lab 4 CSS CISC1600, Spring 2012 Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive

More information

HTML & CSS Cheat Sheet

HTML & CSS Cheat Sheet 1 HTML & CSS Cheat Sheet Fall 2017 HTML & CSS Cheat Sheet from Typographic Web Design 3 by Laura Franz Web safe fonts vs web fonts You can expect these web safe fonts to work across most platforms and

More information

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx

More information

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed

More information

А «- - «Exellent»» 50, 18, «Exellent»., , -., -. -,, html -. - «Exellent»,.

А «- - «Exellent»» 50, 18, «Exellent»., , -., -. -,, html -. - «Exellent»,. А «- - «Exellent»» 50, 18, 21. - - «Exellent»., -. -. -. -, -., -. -,, html -. - «Exellent»,. А... 3 1 -... 5 1.1, -... 5 1.2 Э -... 8 1.3 -... 9 1.4, -... 16 1.4.1... 16 1.4.2... 18 1.4.3.... 18 2 - «Exellent»...

More information

Mateen Eslamy 10/31/13

Mateen Eslamy 10/31/13 Mateen Eslamy 10/31/13 Tutorial In this tutorial, you ll learn how to create a webpage using Twitter Bootstrap 3. The goal of this tutorial is to create a responsive webpage, meaning that if the webpage

More information

CE419 Web Programming. Session 3: HTML (contd.), CSS

CE419 Web Programming. Session 3: HTML (contd.), CSS CE419 Web Programming Session 3: HTML (contd.), CSS 1 Forms 2 Forms Provides a way to interact with users. Not useful without a server-side counterpart. 3 From Elements

More information

Summary 4/5. (contains info about the html)

Summary 4/5. (contains info about the html) Summary Tag Info Version Attributes Comment 4/5

More information

Title: Dec 11 3:40 PM (1 of 11)

Title: Dec 11 3:40 PM (1 of 11) ... basic iframe body {color: brown; font family: "Times New Roman"} this is a test of using iframe Here I have set up two iframes next to each

More information

Hoster: openload.co - Free PLUGIN_DEFECT-Error: 08d a1830b60ab13ddec9a2ff6

Hoster: openload.co - Free PLUGIN_DEFECT-Error: 08d a1830b60ab13ddec9a2ff6 JDownloader - Bug #80273 Bug # 75914 (Closed): Hoster: openload.co - Free Hoster: openload.co - Free PLUGIN_DEFECT-Error: 08d9453425a1830b60ab13ddec9a2ff6 08/18/2016 02:13 AM - StatServ Status: Closed

More information

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1 59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The

More information

As we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.

As we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application. Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address

More information

Deccansoft Software Services

Deccansoft Software Services Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module

More information

Provider Application User Interface Guidelines. Page 1

Provider Application User Interface Guidelines. Page 1 Provider Application User Interface Guidelines Page 1 Typography The Provider application includes one typeface: Lato ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@ $%^&*()-?/Æ Lato

More information

home.php 1/1 lectures/6/src/ include.php 1/1 lectures/6/src/

home.php 1/1 lectures/6/src/ include.php 1/1 lectures/6/src/ home.php 1/1 3: * home.php 5: * A simple home page for these login demos. 6: * David J. Malan 8: * Computer Science E-75 9: * Harvard Extension School 10: */ 11: // enable sessions 13: session_start();

More information

2005 WebGUI Users Conference

2005 WebGUI Users Conference Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.

More information

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5

WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 In this chapter, you will learn how to... LEARNING OUTCOMES Code relative hyperlinks to web pages in folders within a website Configure

More information

PUBLISHER SPECIFIC CSS RULES

PUBLISHER SPECIFIC CSS RULES PUBLISHER SPECIFIC CSS RULES Solita Oy Helsinki Tampere Oulu 26.1.2016 2 (24) Document History Version Date Author Description 0.1 August 17, 2015 J. Similä First draft 0.2 January 26, 2015 A. Autio Fixed

More information

Creating and Building Websites

Creating and Building Websites Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 6 Slide 1 of 28 Week 6 Agenda

More information

CS 350 Internet Applications I Name: Exam II (CSS) October 29, 2013

CS 350 Internet Applications I Name: Exam II (CSS) October 29, 2013 CS 350 Internet Applications I Name: Exam II (CSS) October 29, 2013 Part I. (50%) Multiple Guess Choice. 1. What does CSS stand for? a. Creative Style Sheets b. Computer Style Sheets c. Cascading Style

More information