Completed

HTML, CSS and JavaScript Training

Amsteel Mills

Date

13 – 23 Jun 2022

Organised by

CeDR Consulting Sdn Bhd

Trainer

Azman Zakaria

Attendees

Introduction :

JavaScript often abbreviated JS is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. This training is created for beginners in HTML, CSS, and JavaScript. No programming pre-requisite is required.
In this class, you will get started as a web developer by learning the basics of HTML, the essential language of the web. The class then proceeds to teach you how to render HTML in various formats using CSS. Finally, you will learn how to add interactivity to HTML by using JavaScript programming.

Required Tools:

Windows 10 / 11 with 8 GB RAM, 1 GB HDD
Chrome Browser
Visual Studio Code
Tomcat 9

Syllabus

Chapter 1 : Exploring JavaScript in the Console

Installing Atom
Chrome Developer Tools
Our first program
Why do we use Chrome Developer Tools?
Why do we use Atom as the text editor?
Exercise
Summary

Chapter 2 : Solving Problem Using JavaScript

Variables
Comments
Arithmetic operators
More operators and operations
Summary

Chapter 3 : Introducing HTML and CSS

HTML
CSS
JavaScript on an HTML page
Summary

Chapter 4 : Diving a Bit Deeper

Diving a Bit Deeper
JavaScript methods
HTML buttons and form
If statement
Switch-case
Loops
Summary

Chapter 5 : Ahoy! Sailing into Battle

The HTML part
The CSS part
The JavaScript part
The final code
Summary

Chapter 6 : Exploring the Benefits of jQuery

Exploring the Benefits of jQuery
Installing jQuery
Explaining the code
Going deeper
Summary

Chapter 7 : Introducing the Canvas

Implementing canvas
Adding JavaScript
Drawing a rectangle
Drawing a line
A quick exercise
Drawing a circle
Draw linear gradient
A quick exercise
Let's make a clock!
Summary

Chapter 8 : Tidying Up Your Code Using OOP

Tidying up Your Code Using OOP
Inheritance in JavaScript
Encapsulation in JavaScript
Dissecting Hangman
Summary

Training Materials

Projek Code

https://gitlab.com/azman1204.test/js-training-amsteel-g1

https://gitlab.com/azman1204/sakila-amsteel-g1

Template Inspinia

inspinia

Trainer Profile

Nama : Azman bin Zakaria
Umur : 52 tahun
Pengalaman Dalam Bidang IT : 21 Tahun
Syarikat : Favourite Trainer Sdn Bhd
Kelulusan :

Bachelor IT UiTM
Diploma Computer Science UiTM
HRDF Certified Instructor

Azman merupakan senior programmer yang passionate dalam bidang pengaturcaraan komputer dari awal mulai beliau bekerja pada tahun 2000 sehingga hari ini. Beliau mempunyai pengalaman bekerja yang luas di agensi kerajaan, swasta dan sebagai freelancer.
Antara pengaturcaraan yang selalu digunakan adalah seperti :

PHP (sejak tahun 2000)
PHP dan Laravel Framework
PHP dan Yii Framework
Coldfusion
Java
Java dan Spring Boot Framework
Javascript
jQuery
Vuejs
Angular
Flutter

Notes

Content Here

const companies= [
    {name: "Company One", category: "Finance", start: 1981, end: 2004},
    {name: "Company Two", category: "Retail", start: 1992, end: 2008},
    {name: "Company Three", category: "Auto", start: 1999, end: 2007},
    {name: "Company Four", category: "Retail", start: 1989, end: 2010},
    {name: "Company Five", category: "Technology", start: 2009, end: 2014},
    {name: "Company Six", category: "Finance", start: 1987, end: 2010},
    {name: "Company Seven", category: "Auto", start: 1986, end: 1996},
    {name: "Company Eight", category: "Technology", start: 2011, end: 2016},
    {name: "Company Nine", category: "Retail", start: 1981, end: 1989}
  ];

<!DOCTYPE html>
<html lang="en">
<script type="text/javascript">
    var canvas;
    var canvasElement;
    // clock settings
    var cX = 0;
    var cY = 0;
    var radius = 150;
    // time settings
    var date;
    var hours;
    var minutes;
    var seconds;

    function init() {
        canvas = document.getElementById("myclock");
        canvasElement = canvas.getContext("2d");
        cX = canvas.width / 2;
        cY = canvas.height / 2;
        initTime();
        drawClock();
        setInterval("animateClock()", 1000);
    }

    // get your system time
    function initTime() {
        date = new Date();
        hours = date.getHours() % 12;
        minutes = date.getMinutes();
        seconds = date.getSeconds();
    }

    // animate the clock
    function animateClock() {
        clearCanvas();
        refreshTime();
        drawClock();
    }

    // clear the canvas
    function clearCanvas() {
        canvasElement.clearRect(0, 0, canvas.width, canvas.height);
    }

    // refresh time after 1 second
    function refreshTime() {
        seconds += 1;
        if (Math.floor((seconds / 60)) != 0) {
            minutes += 1; seconds %=
                60;
        }
        if (Math.floor((minutes / 60)) != 0) {
            hours += 1; minutes %=
                60;
        }
    }

    // draw or redraw Clock after time refresh function is called
    function drawClock() {
        drawClockBackground();
        drawSecondsHand();
        drawMinutesHand();
        drawHoursHand();
    }

    function drawHand(beginX, beginY, endX, endY) {
        canvasElement.beginPath();
        canvasElement.moveTo(beginX, beginY);
        canvasElement.lineTo(endX, endY);
        canvasElement.stroke();
        canvasElement.closePath();
    }

    // draw Hand for seconds
    function drawSecondsHand() {
        endX = cX + radius * Math.sin(seconds * Math.PI / 30);
        endY = cY - radius * Math.cos(seconds * Math.PI / 30);
        drawHand(cX, cY, endX, endY);
    }

    // draw Hand for minutes
    function drawMinutesHand() {
        var rotationUnit = minutes + seconds / 60;
        var rotationFactor = Math.PI / 30;
        var rotation = rotationUnit * rotationFactor;
        var handLength = 0.8 * radius;

        endX = cX + handLength * Math.sin(rotation);
        endY = cY - handLength * Math.cos(rotation);
        drawHand(cX, cY, endX, endY);
    }

    // draw Hand for hours
    function drawHoursHand() {
        var rotationUnit = 5 * hours + minutes / 12;
        var rotationFactor = Math.PI / 30;
        var rotation = rotationUnit * rotationFactor;
        var handLength = 0.4 * radius;
        endX = cX + handLength * Math.sin(rotation);
        endY = cY - handLength * Math.cos(rotation);
        drawHand(cX, cY, endX, endY);
    }

    function drawClockBackground() {
        var correction = 1 / 300;
        var shift_unit = 1 / 170;
        var shift_factor = 1 / 30;
        var angle_initial_position = 2;
        var angle_current_position_begin = 0;
        var angle_current_position_end = 0;
        var repeat = 60;
        var lineWidth = 10;
        for (var i = 0; i < repeat; i += 1) {
            angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;
            angle_current_position_end = angle_current_position_begin + shift_unit;
            if (i % 5 == 0) 
                lineWidth = 20;
            else lineWidth = 10;
                drawArcAtPosition(cX, cY, radius, angle_current_position_begin * Math.PI, angle_current_position_end * Math.PI, false, lineWidth);
        }
        drawLittleCircle(cX, cY);
    }

    function drawArcAtPosition(cX, cY, radius, start_angle, end_angle,
        counterclockwise, lineWidth) {
        canvasElement.beginPath();
        canvasElement.arc(cX, cY, radius, start_angle, end_angle,counterclockwise);
        canvasElement.lineWidth = lineWidth;
        canvasElement.strokeStyle = "black";
        canvasElement.stroke();
        canvasElement.closePath();
    }
    
    function drawLittleCircle(cX, cY) {
        drawArcAtPosition(cX, cY, 4, 0 * Math.PI, 2 * Math.PI, false, 4);
    }
</script>
</head>

<body onload="init()">
    <canvas id="myclock" height="500" width="500"></canvas>
</body>

</html>

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA | Invoice</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

    <div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <img alt="image" class="rounded-circle" src="img/profile_small.jpg"/>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="block m-t-xs font-bold">David Williams</span>
                            <span class="text-muted text-xs block">Art Director <b class="caret"></b></span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a class="dropdown-item" href="profile.html">Profile</a></li>
                            <li><a class="dropdown-item" href="contacts.html">Contacts</a></li>
                            <li><a class="dropdown-item" href="mailbox.html">Mailbox</a></li>
                            <li class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="login.html">Logout</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        IN+
                    </div>
                </li>
                <li>
                    <a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="index.html">Dashboard v.1</a></li>
                        <li><a href="dashboard_2.html">Dashboard v.2</a></li>
                        <li><a href="dashboard_3.html">Dashboard v.3</a></li>
                        <li><a href="dashboard_4_1.html">Dashboard v.4</a></li>
                        <li><a href="dashboard_5.html">Dashboard v.5 </a></li>
                    </ul>
                </li>
                <li>
                    <a href="layouts.html"><i class="fa fa-diamond"></i> <span class="nav-label">Layouts</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">Graphs</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="graph_flot.html">Flot Charts</a></li>
                        <li><a href="graph_morris.html">Morris.js Charts</a></li>
                        <li><a href="graph_rickshaw.html">Rickshaw Charts</a></li>
                        <li><a href="graph_chartjs.html">Chart.js</a></li>
                        <li><a href="graph_chartist.html">Chartist</a></li>
                        <li><a href="c3.html">c3 charts</a></li>
                        <li><a href="graph_peity.html">Peity Charts</a></li>
                        <li><a href="graph_sparkline.html">Sparkline Charts</a></li>
                    </ul>
                </li>
                <li>
                    <a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">Mailbox </span><span class="label label-warning float-right">16/24</span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="mailbox.html">Inbox</a></li>
                        <li><a href="mail_detail.html">Email view</a></li>
                        <li><a href="mail_compose.html">Compose email</a></li>
                        <li><a href="email_template.html">Email templates</a></li>
                    </ul>
                </li>
                <li>
                    <a href="metrics.html"><i class="fa fa-pie-chart"></i> <span class="nav-label">Metrics</span>  </a>
                </li>
                <li>
                    <a href="widgets.html"><i class="fa fa-flask"></i> <span class="nav-label">Widgets</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-edit"></i> <span class="nav-label">Forms</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="form_basic.html">Basic form</a></li>
                        <li><a href="form_advanced.html">Advanced Plugins</a></li>
                        <li><a href="form_wizard.html">Wizard</a></li>
                        <li><a href="form_file_upload.html">File Upload</a></li>
                        <li><a href="form_editors.html">Text Editor</a></li>
                        <li><a href="form_autocomplete.html">Autocomplete</a></li>
                        <li><a href="form_markdown.html">Markdown</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-desktop"></i> <span class="nav-label">App Views</span>  <span class="float-right label label-primary">SPECIAL</span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="contacts.html">Contacts</a></li>
                        <li><a href="profile.html">Profile</a></li>
                        <li><a href="profile_2.html">Profile v.2</a></li>
                        <li><a href="contacts_2.html">Contacts v.2</a></li>
                        <li><a href="projects.html">Projects</a></li>
                        <li><a href="project_detail.html">Project detail</a></li>
                        <li><a href="activity_stream.html">Activity stream</a></li>
                        <li><a href="teams_board.html">Teams board</a></li>
                        <li><a href="social_feed.html">Social feed</a></li>
                        <li><a href="clients.html">Clients</a></li>
                        <li><a href="full_height.html">Outlook view</a></li>
                        <li><a href="vote_list.html">Vote list</a></li>
                        <li><a href="file_manager.html">File manager</a></li>
                        <li><a href="calendar.html">Calendar</a></li>
                        <li><a href="issue_tracker.html">Issue tracker</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="article.html">Article</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="timeline.html">Timeline</a></li>
                        <li><a href="pin_board.html">Pin board</a></li>
                    </ul>
                </li>
                <li class="active">
                    <a href="#"><i class="fa fa-files-o"></i> <span class="nav-label">Other Pages</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="search_results.html">Search results</a></li>
                        <li><a href="lockscreen.html">Lockscreen</a></li>
                        <li class="active"><a href="invoice.html">Invoice</a></li>
                        <li><a href="login.html">Login</a></li>
                        <li><a href="login_two_columns.html">Login v.2</a></li>
                        <li><a href="forgot_password.html">Forget password</a></li>
                        <li><a href="register.html">Register</a></li>
                        <li><a href="404.html">404 Page</a></li>
                        <li><a href="500.html">500 Page</a></li>
                        <li><a href="empty_page.html">Empty page</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-globe"></i> <span class="nav-label">Miscellaneous</span><span class="label label-info float-right">NEW</span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="toast_notifications.html">Notification</a></li>
                        <li><a href="nestable_list.html">Nestable list</a></li>
                        <li><a href="agile_board.html">Agile board</a></li>
                        <li><a href="timeline_2.html">Timeline v.2</a></li>
                        <li><a href="diff.html">Diff</a></li>
                        <li><a href="pdf_viewer.html">PDF viewer</a></li>
                        <li><a href="i18support.html">i18 support</a></li>
                        <li><a href="sweetalert.html">Sweet alert</a></li>
                        <li><a href="idle_timer.html">Idle timer</a></li>
                        <li><a href="truncate.html">Truncate</a></li>
                        <li><a href="password_meter.html">Password meter</a></li>
                        <li><a href="spinners.html">Spinners</a></li>
                        <li><a href="spinners_usage.html">Spinners usage</a></li>
                        <li><a href="tinycon.html">Live favicon</a></li>
                        <li><a href="google_maps.html">Google maps</a></li>
                        <li><a href="datamaps.html">Datamaps</a></li>
                        <li><a href="social_buttons.html">Social buttons</a></li>
                        <li><a href="code_editor.html">Code editor</a></li>
                        <li><a href="modal_window.html">Modal window</a></li>
                        <li><a href="clipboard.html">Clipboard</a></li>
                        <li><a href="text_spinners.html">Text spinners</a></li>
                        <li><a href="forum_main.html">Forum view</a></li>
                        <li><a href="validation.html">Validation</a></li>
                        <li><a href="tree_view.html">Tree view</a></li>
                        <li><a href="loading_buttons.html">Loading buttons</a></li>
                        <li><a href="chat_view.html">Chat view</a></li>
                        <li><a href="masonry.html">Masonry</a></li>
                        <li><a href="tour.html">Tour</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-flask"></i> <span class="nav-label">UI Elements</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="typography.html">Typography</a></li>
                        <li><a href="icons.html">Icons</a></li>
                        <li><a href="draggable_panels.html">Draggable Panels</a></li> <li><a href="resizeable_panels.html">Resizeable Panels</a></li>
                        <li><a href="buttons.html">Buttons</a></li>
                        <li><a href="video.html">Video</a></li>
                        <li><a href="tabs_panels.html">Panels</a></li>
                        <li><a href="tabs.html">Tabs</a></li>
                        <li><a href="notifications.html">Notifications & Tooltips</a></li>
                        <li><a href="helper_classes.html">Helper css classes</a></li>
                        <li><a href="badges_labels.html">Badges, Labels, Progress</a></li>
                    </ul>
                </li>

                <li>
                    <a href="grid_options.html"><i class="fa fa-laptop"></i> <span class="nav-label">Grid options</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-table"></i> <span class="nav-label">Tables</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="table_basic.html">Static Tables</a></li>
                        <li><a href="table_data_tables.html">Data Tables</a></li>
                        <li><a href="table_foo_table.html">Foo Tables</a></li>

                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-shopping-cart"></i> <span class="nav-label">E-commerce</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="ecommerce_products_grid.html">Products grid</a></li>
                        <li><a href="ecommerce_product_list.html">Products list</a></li>
                        <li><a href="ecommerce_product.html">Product edit</a></li>
                        <li><a href="ecommerce_product_detail.html">Product detail</a></li>
                        <li><a href="ecommerce-cart.html">Cart</a></li>
                        <li><a href="ecommerce-orders.html">Orders</a></li>
                        <li><a href="ecommerce_payments.html">Credit Card form</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-picture-o"></i> <span class="nav-label">Gallery</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="basic_gallery.html">Lightbox Gallery</a></li>
                        <li><a href="slick_carousel.html">Slick Carousel</a></li>
                        <li><a href="carousel.html">Bootstrap Carousel</a></li>

                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-sitemap"></i> <span class="nav-label">Menu Levels </span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li>
                            <a href="#">Third Level <span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>

                            </ul>
                        </li>
                        <li><a href="#">Second Level Item</a></li>
                        <li>
                            <a href="#">Second Level Item</a></li>
                        <li>
                            <a href="#">Second Level Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="css_animation.html"><i class="fa fa-magic"></i> <span class="nav-label">CSS Animations </span><span class="label label-info float-right">62</span></a>
                </li>
                <li class="landing_link">
                    <a target="_blank" href="landing.html"><i class="fa fa-star"></i> <span class="nav-label">Landing Page</span> <span class="label label-warning float-right">NEW</span></a>
                </li>
                <li class="special_link">
                    <a href="package.html"><i class="fa fa-database"></i> <span class="nav-label">Package</span></a>
                </li>
            </ul>

        </div>
    </nav>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
        <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
            <form role="search" class="navbar-form-custom" action="search_results.html">
                <div class="form-group">
                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                </div>
            </form>
        </div>
            <ul class="nav navbar-top-links navbar-right">
                <li>
                    <span class="m-r-sm text-muted welcome-message">Welcome to INSPINIA+ Admin Theme.</span>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                        <i class="fa fa-envelope"></i>  <span class="label label-warning">16</span>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                        <li>
                            <div class="dropdown-messages-box">
                                <a class="dropdown-item float-left" href="profile.html">
                                    <img alt="image" class="rounded-circle" src="img/a7.jpg">
                                </a>
                                <div class="media-body">
                                    <small class="float-right">46h ago</small>
                                    <strong>Mike Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
                                    <small class="text-muted">3 days ago at 7:58 pm - 10.06.2014</small>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <div class="dropdown-messages-box">
                                <a class="dropdown-item float-left" href="profile.html">
                                    <img alt="image" class="rounded-circle" src="img/a4.jpg">
                                </a>
                                <div class="media-body ">
                                    <small class="float-right text-navy">5h ago</small>
                                    <strong>Chris Johnatan Overtunk</strong> started following <strong>Monica Smith</strong>. <br>
                                    <small class="text-muted">Yesterday 1:21 pm - 11.06.2014</small>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <div class="dropdown-messages-box">
                                <a class="dropdown-item float-left" href="profile.html">
                                    <img alt="image" class="rounded-circle" src="img/profile.jpg">
                                </a>
                                <div class="media-body ">
                                    <small class="float-right">23h ago</small>
                                    <strong>Monica Smith</strong> love <strong>Kim Smith</strong>. <br>
                                    <small class="text-muted">2 days ago at 2:30 am - 11.06.2014</small>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <div class="text-center link-block">
                                <a href="mailbox.html" class="dropdown-item">
                                    <i class="fa fa-envelope"></i> <strong>Read All Messages</strong>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                        <i class="fa fa-bell"></i>  <span class="label label-primary">8</span>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="mailbox.html" class="dropdown-item">
                                <div>
                                    <i class="fa fa-envelope fa-fw"></i> You have 16 messages
                                    <span class="float-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <a href="profile.html" class="dropdown-item">
                                <div>
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="float-right text-muted small">12 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <a href="grid_options.html" class="dropdown-item">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="float-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <div class="text-center link-block">
                                <a href="notifications.html" class="dropdown-item">
                                    <strong>See All Alerts</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>


                <li>
                    <a href="login.html">
                        <i class="fa fa-sign-out"></i> Log out
                    </a>
                </li>
            </ul>

        </nav>
        </div>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-8">
                    <h2>Invoice</h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="index.html">Home</a>
                        </li>
                        <li class="breadcrumb-item">
                            Other Pages
                        </li>
                        <li class="breadcrumb-item active">
                            <strong>Invoice</strong>
                        </li>
                    </ol>
                </div>
            </div>
            <div class="wrapper wrapper-content animated fadeInRight">

            <div class="row">
            <div class="col-lg-12">
                    <div class="ibox-content p-xl">

</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="float-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company &copy; 2014-2018
            </div>
        </div>

        </div>
        </div>

    <!-- Mainly scripts -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="js/inspinia.js"></script>
    <script src="js/plugins/pace/pace.min.js"></script>


</body>

</html>

list.jsp

<%@ page import="java.util.ArrayList, com.amsteel.sakila.models.Film" %>
<%@ include file="../include/header.jsp" %>
<%
ArrayList<Film> films = (ArrayList<Film>)request.getAttribute("films");
int no = 1;
%>
<h1>Film List</h1>
<table class="table table-bordered table-striped">
    <thead>
        <th>No</th>
        <th>Title</th>
        <th>Action</th>
    </thead>
    <tbody>
        <% for (Film film : films) { %>
            <tr>
                <td><%= no++ %></td>
                <td><%= film.getTitle() %></td>
                <td>
                    <a class="btn btn-primary btn-sm modal1" film-id="<%= film.getFilmId() %>"
                    data-toggle="modal" data-target="#myModal">Details</a>

                    <a class="btn btn-primary btn-sm modal2" film-id="<%= film.getFilmId() %>"
                    data-toggle="modal" data-target="#myModal2">Details</a>
                </td>
            </tr>
        <% } %>
    </tbody>
</table>

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <p id="myContent"></p>
        </div>
    </div>
</div>

<%@ include file="../include/footer.jsp" %>

<script>
$('.modal2').click(function() {
    // load() = AJAX function
    let filmId = $(this).attr('film-id');
    let url = 'film?action=film-detail2&film_id=' + filmId;
    $('p#myContent').load(url);
});

// element which has attribute data-toggle="modal"
$('.modal1').click(function() {
    // get data from back-end server using AJAX function
    let filmId = $(this).attr("film-id");
    let url = 'film?action=film-detail&film_id=' + filmId;
    // AJAX function. load(), get(), post(), ajax()
    $.get(url, function(film) {
        $('.modal-title').text(film.title);
        $('.modal-body').text(film.description);
    });  
});
</script>

details.jsp

<%@ page import="com.amsteel.sakila.models.Film" %>
<%
Film film = (Film)request.getAttribute("film");
%>

<div class="container">
    <h2><%= film.getTitle() %></h2>
    <h4><%= film.getDescription() %></h4>
</div>

FilmController

package com.amsteel.sakila.controllers;

import com.amsteel.sakila.helpers.Db;
import com.amsteel.sakila.models.Film;
import com.amsteel.sakila.services.FilmService;
import com.google.gson.Gson;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

@WebServlet("/film")
public class FilmController extends HttpServlet {
    HttpServletRequest request;
    HttpServletResponse response;

    public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.request = request;
        this.response = response;

        // http://localhost:8080/sakila/film?action=list
        String action = request.getParameter("action");

        if (action == null)
            action = "list"; // set default

        switch (action) {
            case "list":
                list();
                break;
            case "film-detail":
                filmDetail();
                break;
            case "film-detail2":
                filmDetail2();
                break;
            default:
                list();
        }
    }

    public void filmDetail2() throws IOException, ServletException {
        FilmService filmService = new FilmService();
        int filmId = Integer.parseInt(request.getParameter("film_id"));
        Film film = filmService.findOne(filmId);
        RequestDispatcher dispatcher = request.getRequestDispatcher("film/details.jsp");
        request.setAttribute("film", film);
        dispatcher.forward(request, response);
    }

    // show film list
    public void list() throws ServletException, IOException {
        FilmService filmService = new FilmService();
        ArrayList<Film> films = filmService.findAll();
        request.setAttribute("films", films);
        RequestDispatcher dispatcher = request.getRequestDispatcher("/film/list.jsp");
        dispatcher.forward(request, response);
    }

    // show film detail. AJAX request
    public void filmDetail() throws IOException {
        PrintWriter writer = response.getWriter();
        //writer.print("Hello from server...");
        FilmService filmService = new FilmService();
        int filmId = Integer.parseInt(request.getParameter("film_id"));
        Film film = filmService.findOne(filmId);
        // JSON = Javascript Object Notation
        // print data to client in JSON format { "key" : "value" } = obj, [ ] = array
        // {"filmId" : 1, "title":"...", "description": "..." ....}
        Gson gson = new Gson();
        response.setContentType("application/json");
        writer.print(gson.toJson(film));
    }

}

Db.java

/**
 * this class is used to connect to DB
 */
package com.amsteel.sakila.helpers;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class Db {
    public static PreparedStatement getConnection(String sql) {
        PreparedStatement stmt = null;
        try {
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost/sakila", "root", "...");
            stmt = conn.prepareStatement(sql);
        } catch (SQLException ex) {
            ex.printStackTrace();
        }
        return stmt;
    }
}

FilmService.java

package com.amsteel.sakila.services;

import com.amsteel.sakila.helpers.Db;
import com.amsteel.sakila.models.Film;

import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

public class FilmService {
    public ArrayList<Film> findAll() {
        ArrayList<Film> films = new ArrayList();
        try {
            String sql = "SELECT * FROM film LIMIT 20";
            PreparedStatement stmt = Db.getConnection(sql);
            ResultSet rs = stmt.executeQuery();

            while (rs.next()) {
                Film film = new Film();
                film.setFilmId(rs.getInt("film_id"));
                film.setLanguageId(rs.getInt("language_id"));
                film.setTitle(rs.getString("title"));
                film.setDescription(rs.getString("description"));
                film.setReleaseYear(rs.getInt("release_year"));
                films.add(film);
            }
        } catch (SQLException ex) {
            ex.printStackTrace();
        }
        return films;
    }

    public Film findOne(int filmId) {
        Film film = new Film();

        try {
            String sql = "SELECT * FROM film WHERE film_id = " + filmId;
            PreparedStatement stmt = Db.getConnection(sql);
            ResultSet rs = stmt.executeQuery();
            if (rs.next()) {
                film.setFilmId(rs.getInt("film_id"));
                film.setLanguageId(rs.getInt("language_id"));
                film.setTitle(rs.getString("title"));
                film.setDescription(rs.getString("description"));
                film.setReleaseYear(rs.getInt("release_year"));
            }
        } catch (SQLException ex) {
            ex.printStackTrace(); // print err to console
        }

        return film;
    }

    public static void main(String[] args) {
        FilmService filmService = new FilmService();

        Film f = filmService.findOne(1);
        System.out.println("TITLE = " + f.getTitle());

        ArrayList<Film> films = filmService.findAll();
        for (Film film : films) {
            System.out.println(film.getTitle());
        }
    }
}

Film.java

/**
 * java bean / POJO
 */
package com.amsteel.sakila.models;

public class Film {
    private int filmId;
    private String title;
    private String description;
    private int languageId;
    private int releaseYear;

    public int getFilmId() {
        return filmId;
    }

    public void setFilmId(int filmId) {
        this.filmId = filmId;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public int getLanguageId() {
        return languageId;
    }

    public void setLanguageId(int languageId) {
        this.languageId = languageId;
    }

    public int getReleaseYear() {
        return releaseYear;
    }

    public void setReleaseYear(int releaseYear) {
        this.releaseYear = releaseYear;
    }
}

Borang Penilaian Keberkesanan Latihan

Training evaluation · HTML, CSS and JavaScript Training

Attendance

Registration closed

This training ended on 23 Jun 2022, so new attendance can no longer be registered.

Students (0)

No students have registered yet.

Back to Current Training

HTML, CSS and JavaScript Training

Syllabus

Training Materials

Trainer Profile

Notes

1.Chapter 1 : Exploring JavaScript in the Console

2.Chapter 2 : Solving Problem Using JavaScript

3.Chapter 3 : Introducing HTML and CSS

4.Chapter 4 : Diving a Bit Deeper

5.Chapter 5 : Ahoy! Sailing into Battle

6.Chapter 6 : Exploring the Benefits of jQuery

7.Chapter 7 : Introducing the Canvas

8.Chapter 8 : Tidying Up Your Code Using OOP

9.Excercise

10.clock

11.Header and Footer

12.Source Code

Borang Penilaian Keberkesanan Latihan

Attendance

Students (0)