Presentasi merupakan alat untuk membantu menjelaskan apa yang kita bicarakan pada halayak ramai, terlalu maenstream jika aplikasi di buat dengan microsoft power point, wps, libre office. hal yang lebih keren jika presentasi dibuat dengan html dan jquery berikut ini tampilannya :
sumber gambar : document pribadi
Buat terlebuh dahlu index.html ini merupakan scriptnya :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Program Keluarga Harapan</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/white.css" id="theme">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="lib/css/zenburn.css">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-transition="slide" data-background="img/dis.jpg" data-background-transition="zoom">
<p class="cali hitam dua">Biodata</p>
<p class="exo satu hitam">Mulyadi Sopiyani<style type="text/css" font="italic"></style></p>
<p class="exo satu hitam">11211328<style type="text/css" font="italic"></style></p>
<p class="vibes satu hitam">Web.B.R2</p>
</section>
<section data-transition="slide" data-background="img/a.jpg" data-background-transition="zoom">
<p class="cali hitam dua">Presentasi Skripsi</p>
<p class="exo satu hitam">Sistem Pendukung Keputusan Program Keluarga Harapan Menggunakan Metode <style type="text/css" font="italic"></style>SAW Di Kecamatan Padarincang</p>
<p class="vibes satu hitam">Universitas Serang Raya</p>
</section>
<section data-transition="slide" data-background="img/q.jpg" data-background-transition="fade-out">
<section>
<p class="exist hitam dua">Latar Belakang !!!</p>
</section>
<section>
<p class="exist hitam dua">Program Keluarga Harapan</p>
<p class="exo hitam nol left fragment">Program Keluarga Harapan (PKH) merupakan program perlindungan sosial yang memberikan bantuan tunai Kepada rumah tanggga sangat miskin (RTSM) dan bagi anggota keluarga RTSM diwajibkan melakasanakan persyaratan dan kententuan yang telah ditetapkan, untuk menentukan bantuan program keluarga harapan, pemerintah menentukan beberapa kriteria dalam menentukan siapa saja yang berhak menerima dana bantuan.</p>
</section>
<section>
<p class="exist hitam dua">Tekhnologi Informasi</p>
<p class="exo hitam nol left fragment">Tekhnologi adalah jalan untuk memudahkan penyeleksian. Maka penulis membuat sistem berbasis web dengan menggunakan metode Simple Addictive Weighting (SAW) yang merupakan suatu model pendukung keputusan yang sering juga dikenal istilah metode penjumlahan terbobot dari rating kerja pada setiap alternative pada semua atribut. metode SAW ini cukup efektif dalam menyederhanakan dan mempercepat peroses serta hasil pengambilan keputusan yang merupakan metode yang cukup fleksibel dan dapat membuat keputusan yang terbaik dan tepat untuk menentuakan masyarakat yang menerima dana bantuan program keluarga harapan di Kecamatan Padarincang</p>
</section><section>
<p class="exist hitam dua">Kecamatan Padarincang</p>
<p class="exo hitam nol left fragment">Kecamatan Padarincang merupakan wilayah yang terletak dikabupaten serang yang wilayahnya cukup luas dan masyarakatnya cukup banyak. Masyarkat di Kecamatan Padarincang mayoritas mata pencarianya adalah petani, pedagang dan ada sebagian yang belum bekerja, karna hal tersebut masih banyak keluarga kurang mampu berada diwilayah itu yang perlu bantuan PKH. Wilayah yang cukup luas dan masyarakat yang cukup banyak, mengakibatkan pegawai kecamatan kesulitan dalam proses penyeleksian pemberian dana PKH. Proses penyeleksian Masih menggunakan cara konvensional yaitu Peserta PKH didapatkan dari mengambil data sensus penduduk.</p>
</section>
</section>
<section data-transition="slide" data-background="img/c.jpg" data-background-transition="fade-out">
<p class="exist hitam dua">Idetifikasi Masalah </p>
Beberapa hal yang diidentifikasi sebagai permasalahan, diantaranya sebagai berikut :</p>
<p class="exo hitam nol left fragment">1. Proses penyeleksian secara konvensional dana bantuan PKH dinilai kurang efektif.</p>
<p class="exo hitam nol left fragment">2. Banyaknya warga kecamatan padarincang dan rumitnya penyeleksian PKH, sehingga waktu penyeleksian menjadi lama dan kurang efisien.</p>
<p class="exo hitam nol left fragment">3. Adanya kemungkinan penyeleksian PKH tidak tepat sasaran dikarnakan kurangnya sumber daya tekhnologi serta tidak diterapkannya kriteria dalam melakukan penyeleksian.</p>
</section>
<section data-transition="convex" data-background="img/f.jpg" data-background-transition="fade">
<p class="exist hitam tiga">1.3 Rumusan Masalah</p>
Dalam identifikasi masalah diatas, maka dapat dirumuskan permasalahnya adalah :</p>
<p class="exo hitam nol left fragment">1. Bagaimana mempercepat waktu penyeleksian PKH agar lebih efisien dan tepat sasaran?</p>
<p class="exo hitam nol left fragment">2. Bagimana membangun program berbasis web dengan menggunakan metode SAW yang mudah di gunakan dengan kriteria pendidikan, penghasilan, jumlah tanggungan, kesehatan dan kepemilikan rumah/tanah?</p>
</section>
<section data-transition="convex" data-background="img/3.jpg" data-background-transition="zoom">
<p class="exist hitam satu">1.4 Batasan Masalah :</p>
<p class="exo hitam nol left fragment">1. Pembuatan aplikasi menggunakan bahasa pemrograman php dan mariadb</p>
<p class="exo hitam nol left fragment">2. Perancangan menggunakan UML.</p>
<p class="exo hitam nol left fragment">3. Penyeleksian PKH menggunakan metode SAW dengan pehitungan benefit.</p>
<p class="exo hitam nol left fragment">4. Metode Seleksi dengan SAW (Hanya Benefit).</p>
<p class="exo hitam nol left fragment">5. Sistem aplikasi kelayakan PKH di wilayah Kecamatan Padarincang.</p>
<p class="exo hitam nol left fragment">6. Penyeleksian Program Keluarga Harapan sesuai keriteria yang telah di tentukan.</p>
</section>
<section data-transition="slide" data-background="img/m.jpg" data-background-transition="fade">
<p class="exist hitam dua">Analisa :</p>
<p class="exo hitam nol left fragment">1. Analisa Sistem </p>
<p class="exo hitam nol left fragment">Sistem lama masih menggunakan cara kovensional (tradisional) yaitu sensus penduduk.</p>
<p class="exo hitam nol left fragment">Masalah Dari Sistem Lama :</p>
<p class="exo hitam nol left fragment" style="padding-left:50px">a. Staff kesulitan karna masyarakat Kec. Padarincang cukup banyak</p>
<p class="exo hitam nol left fragment" style="padding-left:50px">b. Proses pelaporannya masih dilakukan cara manual yaitu mengetik data satu persatu.</p>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<p class="exist hitam dua left fragment">Analisa Kebutuhan Data :</p>
<p class="exo hitam nol left fragment">1. Analisa Kebutuhan Seleksi</p>
<p class="exo hitam nol left fragment">2. Analisa Kebutuhan Masukan</p>
<p class="exo hitam nol left fragment">3. Analisa Kebutuhan Proses</p>
<p class="exo hitam nol left fragment">4. Analisa Kebutuhan Keluaran</p>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<p class="exist hitam dua left fragment">Analisa Kebutuhan Seleksi :</p>
<p class="exo hitam nol left fragment">1. Data masyarakat</p>
<p class="exo hitam nol left fragment">2. Data kriteria yang ditetapkan pemerintah</p>
<p class="exo hitam nol left fragment">3. Data bobot nilai calon PKH</p>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<p class="exist hitam dua left fragment">Analisa Data Masukan :</p>
<p class="exo hitam nol left fragment">1. Data masyarakat</p>
<p class="exo hitam nol left fragment">2. Data kriteria</p>
<p class="exo hitam nol left fragment">3. Data seleksi</p>
<p class="exo hitam nol left fragment">4. Data user</p>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<p class="exist hitam dua left fragment">Analisa Data Proses :</p>
<p class="exo hitam nol left fragment">1. Login</p>
<p class="exo hitam nol left fragment">2. Kelola kriteria</p>
<p class="exo hitam nol left fragment">3. Kelola masyarakat</p>
<p class="exo hitam nol left fragment">4. Kelola data seleksi</p>
<p class="exo hitam nol left fragment">5. Kelola laporan</p>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<p class="exist hitam dua left fragment">Analisa Data Keluaran :</p>
<p class="exo hitam nol left fragment">1. Data Seleksi</p>
<p class="exo hitam nol left fragment">2. Data Laporan</p>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<p class="exist hitam dua left fragment">Analisa Perangkat Keras :</p>
<p class="exo hitam nol left fragment">1. Komputer (Personal Computer)</p>
<p class="exo hitam nol left fragment">2. Printer</p>
<p class="exo hitam nol left fragment">3. Keyboard</p>
<p class="exo hitam nol left fragment">4. Mouse</p>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<p class="exist hitam dua left fragment">Analisa Perancangan :</p>
<p class="exo hitam n left fragment">1. Analisa Perancangan Sistem</p>
<p class="exo hitam nol left fragment">2. Simple Additive Weigting</p>
<p class="exo hitam nol left fragment">3. Unified Modeling Langguage(UML)</p>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<section>
<p class="exist hitam dua left fragment">Analisa Perancangan Sistem:</p>
<p class="exo hitam nol left fragment">1. Input adalah data atau informasi yang dimasukan ke dalam komputer untuk diolah atau diproses.</p>
<p class="exo hitam nol left fragment">2. Proses adalah pengolahan dari data yang telah dimasukan/diinputkan kedalam komputer.</p>
<p class="exo hitam nol left fragment">3. Output adalah proses menampilkan data atau mencetak hasil</p>
</section>
</section>
<section data-background="img/d.jpg" data-background-transition="fade">
<section>
<p class="exist hitam dua left fragment">Simple Additive Weighting :</p>
<p class="exo hitam nol left fragment">Dalam Penyeleksian PKH menggunakan metode Simple Additive Weightingibutuhkan keriteria-kriteria dan nilai bobot untuk melakukan perhitungan untuk menndapatkan nilai alternative terbaik dan sudah mempunyai setandar nilai jika nilainya sama dengan atau lebih dari 0.50 maka layak jika di bawah 0.5 maka tidak layak mendapatkan dana bantuan.</p>
</section>
<section>
<p class="exist hitam satu">Dalam Penyeleksian PKH metode Simple Additive Weighting dibutuhkan Kriteria sebagai berikut :</p>
<table>
<thead>
<tr>
<th>Kriteria</th>
<th>Nama Kriteia</th>
</tr>
</thead>
<tbody>
<tr>
<td>C1</td>
<td>Penghasilan</td>
</tr>
<tr>
<td>C2</td>
<td>Kepemilikan Tanah/Rumah</td>
</tr>
<tr>
<td>C3</td>
<td>Jumlah Tanggungan</td>
</tr>
<tr>
<td>C4</td>
<td>Pendidikan</td>
</tr>
<tr>
<td>C5</td>
<td>Kesehatan</td>
</tr>
</tbody>
</table>
</section>
</section>
<section data-transition="slide" data-background="img/m.jpg" data-background-transition="fade">
<p class="exist hitam dua">Unified Modelling Langguage</p>
<p class="exo hitam satu">1. Usecase Diagram</p>
<p class="exo hitam satu">2. Actifity Diagram</p>
<p class="exo hitam satu">3. Class Diagram</p>
<p class="exo hitam satu">4. Squance Diagram</p>
</section>
<section data-transition="slide" data-background="img/m.jpg" data-background-transition="fade">
<section>
<p class="exist hitam dua">Usecase Diagram</p>
<p class="exo hitam satu">Merupakan rangkaian yang terkait dalam sistem yang dilakukan admin/user untuk menggambarkan fungsionalisasi dari sistem</p>
</section>
<section>
<img src="img/usecasePKH.png">
</section>
</section>
<section data-transition="slide" data-background="img/m.jpg" data-background-transition="fade">
<section>
<p class="exist hitam dua">Aktifity Diagram</p>
<p class="exo hitam satu">Menjelaskan berbagai alur dalam sistem yang di rancang dan bagaimana memulai memperoses dan akhir dari sistem</p>
</section>
<section>
<img src="img/activity.jpg">
</section>
</section>
<section data-transition="slide" data-background="img/m.jpg" data-background-transition="fade">
<section>
<p class="exist hitam dua">Class Diagram</p>
<p class="exo hitam satu">Merupakan rangkaian yang terkait dalam sistem yang dilakukan admin/user untuk menggambarkan funsionalisasi dari sistem</p>
</section>
<section>
<img src="img/classdiagram.png">
</section>
</section>
<section data-transition="slide" data-background="img/m.jpg" data-background-transition="fade">
<section>
<p class="exist hitam dua">Squance Diagram</p>
<p class="exo hitam satu">Merupakan rangkaian yang terkait dalam sistem yang dilakukan admin/user untuk menggambarkan funsionalisasi dari sistem</p>
</section>
<section>
<img src="img/squencetambah.png">
</section>
</section>
<section data-transition="zoom" data-background="img/d.jpg" data-background-transition="fade">
<p class="exist hitam dua left fragment">Kesimpulan :</p>
<p class="exo hitam nol left fragment">1. Metode SAW cukup efektif dalam menyederhanakan dan mempercepat peroses serta hasil pengambilan keputusan. SAW merupakan metode yang cukup fleksibel dan dapat membuat keputusan yang terbaik dan tepat untuk menentuakan masyarakat yang menerima dana PKH di Kecamatan Padarincang.
</p>
<p class="exo hitam nol left fragment">2. Dengan Membangun aplikasi PKH menggunakan bahasa pemrograman PHP dan MariaDB sebagai databasenya. Aplikasi PKH interfacenya di rancang sesederhana mungkin agar bisa di gunakan oleh berbagai kalangan dan aplikasi PKH ini mampu menyeleksi calon penerima bantuan PKH dengan cepat , efektif dan efisien.</p>
</section>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>
Css dan Javascrptnya bisa di downoad disini dan masukan kedalam satufolder beserta index.htmlnya.
Script html dan jqurynya silahkan download disini. untuk membuka file presentasi tersebut tinggal klik kanan index.html open with mozilla firefox, google chrom atau aplikasi browser yang lainnya.
jika ada pertanyaan silahkan komen saja. semoga artikel ini bisa membantu. jika ada kata-kata yang kurang di mengerti silahkan komen . wasalamualikum :)
jika ada pertanyaan silahkan komen saja. semoga artikel ini bisa membantu. jika ada kata-kata yang kurang di mengerti silahkan komen . wasalamualikum :)
0 Response to "Membuat Presentasi dengan HTML dan Jquery yang indah dan cantik"
Posting Komentar