TRAINING PHP

ALUMNI DAN CALON ALUMNI STMIK SURABAYA

Teguh Sutanto Sistem Informasi | STMIK Surabaya 19-23 Juni 2014

Tujuan

  Membuat dan memanipulasi basis data MySQL Membuat Aplikasasi web dengan PHP

Case Study: Manajeman Keanggotaan Koperasi Wanita

• Manajemen Anggota Koperasi Wanita adalah aplikasi berbasis web yang digunakan untuk melakukan pengaturan terhadap data anggota koperasi wanita. Pengaturan (manajemen) meliputi: • Pendaftaran Anggota • • Penambahan Kelompok Update Data Anggota • • • Update Data Kelompok Pertemuan Kelompok Pembayaran Simpanan Pokok dan Simpanan Wajib

Web Programming

HTML CSS JavaScript Database Server Side

REVIEW HTML

Basic Syntax, Form, Input

What is HTML?

• • • • • • • HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages

Basic HTML Tags

File text dengan extention Htm, html, xhtml

Example Explained

1.

2.

3.

4.

5.

The DOCTYPE declaration defines the document type The text between and describes the web page The text between and is the visible page content The text between

and

is displayed as a heading The text between

and

is displayed as a paragraph

HTML Tags

• • • • • • HTML markup tags are usually called HTML tags.

HTML tags are keywords (tag names) surrounded by angle brackets like HTML tags normally come in pairs like

and

The first tag in a pair is the start tag, the second tag is the

end tag

The end tag is written like the start tag, with a slash before the tag name Start and end tags are also called opening tags and closing

tags

HTML Element Syntax

• • • • • • An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes

HTML Attributes

• • • • HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"

Common Attributes

Attribute class id style title Description Specifies one or more classnames for an element (refers to a class in a style sheet) Specifies a unique id for an element Specifies an inline CSS style for an element Specifies extra information about an element (displayed as a tool tip)

Lab 1 : Membuat Index.html

Website Layouts

• • Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

Multiple columns are created by using

or elements. CSS are

used to position elements, or to create backgrounds or colorful look for the pages.

Lab 2: Membuat Layout

Manajemen Keanggotaan Koperasi Wanita

Pendaftaran Anggota
View Data Anggota
View Data Kelompok

ISI WEB

Manajemen Anggota Koperasi dibuat Oleh [NAMA ANDA] ©2014

Modifikasi Index.html

HTML Forms

  HTML forms are used to pass data to a server.

An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

HTML Form Tags

         

Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <button> Defines a clickable button</p> <a id="p20" href="#"></a> <h3>Lab 3. Membuat Form Add Anggota</h3> <p>www.anggotakop.com</p> <p>Pendafrataran Anggota Koperasi No Anggota Nama text text Id Kelompok 001 002 003 004 Alamat No. Telp Tempat Lahir Tanggal Lahir text text text text Simpan Batal</p> <a id="p21" href="#"></a> <h3>AddAnggota.html</h3> <p><HTML> <HEAD> </HEAD> <BODY> <h1> Pendaftaran Anggota Koperasi </h1> <form method=“POST” action=“proses.php”> <table> <tr> <td> <label for="txtNoAnggota">No Anggota</label> </td> <td> <input type="Text" id="txtNoAnggota"/> </tr> </td> <tr> <td> <label for="txtNama">Nama</label> </td> <td> <input type="Text" id="txtNama"/> </tr> </td></p> <a id="p22" href="#"></a> <h3>What is PHP?</h3> <p>    PHP is an acronym for "PHP Hypertext Preprocessor" PHP is a widely-used, open source scripting language PHP scripts are executed on the server PHP costs nothing, it is free to download and use</p> <a id="p23" href="#"></a> <h3>What is a PHP File?</h3> <p>   PHP files can contain text, HTML, CSS, JavaScript, and PHP code PHP code are executed on the server, and the result is returned to the browser as plain HTML PHP files have extension ".php"</p> <a id="p24" href="#"></a> <h3>What Can PHP Do?</h3> <p>       PHP can generate dynamic page content PHP can create, open, read, write, delete, and close files on the server PHP can collect form data PHP can send and receive cookies PHP can add, delete, modify data in your database PHP can restrict users to access some pages on your website PHP can encrypt data</p> <a id="p25" href="#"></a> <h3>Why PHP?</h3> <p>    PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) PHP is compatible with almost all servers used today (Apache, IIS, etc.) PHP supports a wide range of database PHP is free. Download it from the official PHP resource: www.php.net</p> <p>PHP is easy to learn and runs efficiently on the server side</p> <a id="p26" href="#"></a> <h3>Basic PHP Syntax</h3> <p>  A PHP script can be placed anywhere in the document.</p> <p>A PHP script starts with <?php and ends with ?></p> <a id="p27" href="#"></a> <p> The default file extension for PHP files is ".php".</p> <p> A PHP file normally contains HTML tags, and some PHP scripting code.</p> <a id="p29" href="#"></a> <h3>PHP Variables</h3> <p>   As with algebra, PHP variables can be used to hold values (x=5) or expressions (z=x+y).</p> <p>A variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume).</p> <p>Rules for PHP variables:  A variable starts with the $ sign, followed by the name of the variable  A variable name must start with a letter or the underscore character    A variable name cannot start with a number A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ ) Variable names are case sensitive ($y and $Y are two different variables)</p> <a id="p30" href="#"></a> <p></p> <h3>GET vs. POST</h3> <p>    Both GET and POST create an array (e.g. array( key => value, key2 => value2, key3 => value3, ...)). This array holds key/value pairs, where keys are the names of the form controls and values are the input data from the user.</p> <p>Both GET and POST are treated as $_GET and $_POST. These are superglobals, which means that they are always accessible, regardless of scope - and you can access them from any function, class or file without having to do anything special.</p> <p>$_GET is an array of variables passed to the current script via the URL parameters.</p> <p>$_POST is an array of variables passed to the current script via the HTTP POST method.</p> </div> </section> </div> </div> </div> </main> <footer> <div class="container mt-3"> <div class="row justify-content-between"> <div class="col"> <a href="/"> <img src="/theme/studyslide/static/logo-slideum.png" /> </a> </div> </div> <div class="row mt-3"> <ul class="col-sm-6 list-unstyled"> <li> <h6 class="mb-3">Company</h6> <li> <i class="fa fa-location-arrow"></i> Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040 <li> <i class="fa fa-phone"></i> +357 64-733-402 <li> <i class="fa fa-envelope"></i> info@slideum.com </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Links</h6> <li> <a href="/about">About</a> <li> <a href="/contacts">Contact</a> <li> <a href="/faq">Help / FAQ</a> </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Legal</h6> <li> <a href="/terms">Terms of Service</a> <li> <a href="/privacy">Privacy policy</a> <li> <a href="/page.html?code=public.usefull.cookie">Cookie policy</a> <li> <a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a> </ul> </div> <hr> <p>slideum.com © 2024, Inc. All rights reserved.</p> </div> </footer> <div class="modal directory" id="directory-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Directory</h5> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> </div> </div> </div> <script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script> <script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script> var __path_directory = [ ] !function __draw_directory(data, root, uuid) { var ul = $('<ul>', uuid && { id: 'category' + uuid, class: !__path_directory.includes(uuid) ? 'collapse' : null }); for (var item in data) { var li = $('<li>').appendTo(ul); if (item = data[item], item.children) { li.append('<a href=#category' + item.id + ' data-toggle=collapse>') __draw_directory(item.children, li, item.id); } else { li.append('<a href=' + item.url + '>'); } var a = $('> a', li).addClass('item').text(item.name) .append($('<a class="link fa fa-external-link" href=' + item.url + '>')); if (item.id === +__path_directory.slice(-1)) { a.addClass('active'); } /* if (item.id !== __path_directory[0]) { a.addClass('collapsed'); } */ } root.append(ul); } ([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside')); var __root_directory = $('#directory-aside > ul'); $('#directory-aside') .on('show.bs.collapse', function() { //console.log('show.collapse') }) .on('hide.bs.collapse', function() { //console.log('hide.collapse') }); $('#directory-modal') .on('show.bs.modal', function() { $('[class$="body"]', this).prepend(__root_directory); }) .on('hide.bs.modal', function() { $('#directory-aside').prepend(__root_directory); }); $('.directory-mobile').on('click', function(e) { e.preventDefault(); }); $('.directory .link').on('click', function(e) { e.stopPropagation(); }); </script> <script> function scrollToViewport() { $('html, body').stop().animate( { scrollTop: $('.navbar').outerHeight() }, 1000); } setTimeout(scrollToViewport, 1000); $(window).on('orientationchange', scrollToViewport); $('[data-toggle="tooltip"]').tooltip(); </script> <script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter28397281 = new Ya.Metrika({ id:28397281 }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <style> @media screen and (max-width: 768px) { .cc-revoke { display: none; }} </style> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function() { window.cookieconsent.initialise( { content: { href: "https://slideum.com/dmca" }, location: true, palette: { button: { background: "#fff", text: "#237afc" }, popup: { background: "#007bff" }, }, position: "bottom-right", revokable: true, theme: "classic", type: "opt-in" })}); </script> </body> </html>