Based on the given content, here is the information you requested: "Modern Web Design with SVVRL @ IM NTU

svvrl @ im ntu n.w
1 / 61
Embed
Share

"Explore SVVRL @ IM NTU's cutting-edge web design techniques, including Bootstrap, jQuery, PHP, SQL, and more for a responsive experience. Learn about different web applications and technologies used in their projects."

  • Web Design
  • Bootstrap
  • jQuery
  • PHP
  • SQL
rayaanacharya
matt_vin Follow

Uploaded on | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

Download Presentation

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

E N D

Presentation Transcript

  1. SVVRL @ IM.NTU : 2023/03/15

  2. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  3. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  4. SVVRL @ IM.NTU ( . IE Firefox) Application Container ( . Apache) ( . MySQL) HTML CSS Javascript PHP SQL 2023/03/15

  5. SVVRL @ IM.NTU (HTTPRequest) http://example.com/a.php Application Container ( . Apache) ( . IE Firefox) <html> <head> <title> </title> </head> <body> Hello World! </body> </html> <html> <head> <title> </title> </head> <body> <? echo Hello World! ; ?> </body> </html> a.php <html> <head> <title> </title> </head> <body> Hello World! </body> </html> 2023/03/15

  6. SVVRL @ IM.NTU AJAX (HTTPRequest) Application Container ( . Apache) ( . IE Firefox) (str, XML,JSON) php 2023/03/15

  7. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  8. SVVRL @ IM.NTU Bootstrap Template <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <!-- meta --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- jquery --> <script type="text/javascript" src="jquery.js"></script> <!-- bootstrap --> <link rel=stylesheet type="text/css" href="bootstrap.css"> <script type="text/javascript" src="bootstrap.js"></script> </head> <body> <body> </html> 2023/03/15

  9. SVVRL @ IM.NTU Bootstrap Grid System <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> </div> <body> </html> .container .container-fluid 12 columns row container column row content column column row 2023/03/15

  10. SVVRL @ IM.NTU Bootstrap Grid System xs sm md lg (>=0px) (>=768px) (>=992px) (>=1200px) container width class prefix gutter width auto 750px 970px 1170px .col-xs- .col-sm- .col-md- .col-lg- 30px 30px 30px 30px Browser .col-sm-2 .col-sm-2 .col-sm-4 .col-sm-4 2023/03/15

  11. SVVRL @ IM.NTU Bootstrap Grid System Browser .col-sm-2 .col-sm-2 .col-sm-4 .col-sm-4 padding-left:15px; padding-right:15px; margin-left:-15px; margin-right:-15px; padding-left:15px; padding-right:15px; <div class="container"> non-grid content <div class="row"> <div class="col-md-1">.col-md-1</div> </div> </div> non-grid content container row column row, column 2023/03/15

  12. SVVRL @ IM.NTU Bootstrap Grid System col-xs-12 <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div>A</div> <div class="col-sm-6 col-lg-3">B</div> <div class="col-sm-6">C</div> <div class="col-lg-6">D</div> </div> </div> <body> </html> class 2023/03/15

  13. SVVRL @ IM.NTU Bootstrap Grid System col-xs-12 <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class=" col-sm-6 ">A</div> <div class="col-sm-6 col-lg-3">B</div> <div class="col-sm-6">C</div> <div class="col-lg-6">D</div> </div> </div> <body> </html> class 2023/03/15

  14. SVVRL @ IM.NTU Bootstrap Grid System Column Wrapping <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-xs-9">A</div> <div class="col-xs-4">B</div> <div class="col-xs-8">C</div> </div> </div> <body> </html> 2023/03/15

  15. SVVRL @ IM.NTU Bootstrap Grid System Offsetting Columns <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-md-4">A</div> <div class=" col-md-4 col-md-offset-4 ">B</div> </div> </div> <body> </html> 2023/03/15

  16. SVVRL @ IM.NTU Bootstrap Grid System Column Ordering <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8 col-md-push-4">title</div> <div class=" col-xs-12 col-md-4 col-md-pull-8">image</div> </div> </div> <body> </html> 2023/03/15

  17. SVVRL @ IM.NTU Bootstrap Grid System <!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8">title</div> <div class=" col-xs-12 col-md-4"> <div class="row"> <div class=" col-xs-6 col-md-4"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" col-xs-6 col-md-4"></div> </div> </div> </div> </div> <body> </html> Nesting Columns 2023/03/15

  18. SVVRL @ IM.NTU Bootstrap Utility Classes xs sm md lg .visible-xs-* .visible-sm-* .visible-md-* .visible-lg-* .hidden-xs .hidden-sm .hidden-md .hidden-lg visible hidden hidden hidden hidden visible visible visible hidden visible hidden hidden visible hidden visible visible hidden hidden visible hidden visible visible hidden visible hidden hidden hidden visible visible visible visible hidden class css .visible-*-block .visible-*-inline .visible-*-inline-block display:block display:inline display:inline-block 2023/03/15

  19. SVVRL @ IM.NTU Bootstrap Clearfix <div class="container"> <div class="row"> <div class=" col-xs-6 col-md-4"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" clearfix visible-xs-block visible-sm-block"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" clearfix visible-md-block visible-lg-block"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" clearfix visible-xs-block visible-sm-block"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" col-xs-6 col-md-4"></div> <div class=" clearfix visible-xs-block visible-sm-block"></div> <div class=" clearfix visible-md-block visible-lg-block"></div> </div> </div> 2023/03/15

  20. SVVRL @ IM.NTU Bootstrap 2017-10-10 6 6 2 12/31 6 2017-10-10 6 2 2017-10-11 2017-10-11 2 2 12/31 2023/03/15

  21. SVVRL @ IM.NTU Bootstrap CSS media query percentage width margin left,right display none block inline inline-block bootstrap.css 2023/03/15

  22. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  23. SVVRL @ IM.NTU jquery $("#user").css("background-color", "#a00a06"); 2023/03/15

  24. SVVRL @ IM.NTU jquery $("#user") $(".title") $("div") $("A > B") $("A B") $("A[attr='attr_value']") 2023/03/15

  25. SVVRL @ IM.NTU jquery <!DOCTYPE html> <html lang="en"> <head> $(document).ready(function(){ $("#block21").click(function(){ $(this).css("background-color", "#a00a06"); }); }); </head> <body> <div id="block21">Hello World!</div> <body> </html> 2023/03/15

  26. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  27. SVVRL @ IM.NTU jquery UI DEMO 2023/03/15

  28. SVVRL @ IM.NTU jquery UI jquery UI <!DOCTYPE html> <html lang="en"> <head> <!-- jquery --> <link rel=stylesheet type="text/css" href="jquery-ui.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript"> function load(){ $("#date").datepicker(); } </script> </head> <body onload= load(); > <input id="date" type="text" /> <body> </html> HTML JS 2023/03/15

  29. SVVRL @ IM.NTU jquery UI - option <html lang="en"> <head> <!-- jquery --> <link rel=stylesheet type="text/css" href="jquery-ui.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> : .datepicker : <script type="text/javascript"> function load(){ $("#date").datepicker({ minDate: +0, maxDate: "+1m", showWeek: true, dateFormat: "yy-mm-dd" }); } </script> </head> <body> <input id="date" type="text" /> <body> </html> : : javascript object (map ) key/value pairs 2023/03/15

  30. SVVRL @ IM.NTU jquery UI - event <html lang="en"> <head> <!-- jquery --> <link rel=stylesheet type="text/css" href="jquery-ui.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> JS UI , Callback function: <script type="text/javascript"> function load(){ $("#date").datepicker({ onSelect: function (dateText, inst){ alert(dateText); $(this).css(" background-color", #a00a06"); } }); } </script> </head> <body> <input id="date" type="text" /> <body> </html> Callback function this 2023/03/15

  31. SVVRL @ IM.NTU jquery UI - method <script type="text/javascript"> $(document).ready(function (){ $("#date"). datepicker({ minDate: +0, maxDate: "+1m", showWeek: true, dateFormate: "yy-mm-dd" }); }); function click_button(){ $("#date"). datepicker("option", " dateFormate ", " yy/mm/dd "); } </script> : UI <input id="date" type="text /> <div id="button" onclick="click_button()"></div> this 2023/03/15

  32. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  33. SVVRL @ IM.NTU jquery plugin list editor ;(function($) { var methods = { init : function(settings){ }, //public functions }; //private variables //private functions $.fn.list_editor = function(method) { /* Method calling logic */ if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply(this, arguments); } else { $.error( 'Method ' + method + ' does not exist on jQuery.list_editor' ); } }; })(jQuery); 2023/03/15

  34. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  35. SVVRL @ IM.NTU PHP <? $name="steve"; $link = mysqli_connect("localhost","user","password","db_name"); mysqli_query("SET NAMES 'UTF8'"); mysqli_query("SET CHARACTER_SET_CLIENT=UTF8"); mysqli_query("SET CHARACTER_SET_RESULTS=UTF8"); $query=" select money from account where user=?"; $stmt=mysqli_prepare($link,$query); mysqli_stmt_bind_param($stmt,"s",$name); mysqli_stmt_execute($stmt); mysqli_stmt_store_result($stmt); mysqli_stmt_bind_result($stmt,$money); while(mysqli_stmt_fetch($stmt)){ echo $money; } ?> Prepared Statement 2023/03/15

  36. SVVRL @ IM.NTU PHP <? $name="steve"; $link = mysqli_connect("localhost","user","password","db_name"); mysqli_query("SET NAMES 'UTF8'"); mysqli_query("SET CHARACTER_SET_CLIENT=UTF8"); mysqli_query("SET CHARACTER_SET_RESULTS=UTF8"); $query=" select money from account where user=?"; $sql=new sql(); $sql_result=$sql->select($link,$query,array($name),$array('money')); if($sql_result['return_code']==1){ echo $sql_result['data'][0]['money']; } ?> 2023/03/15

  37. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  38. SVVRL @ IM.NTU transaction (1/4) 200 Steve Karen user name money Steve Karen 1200 2000 select money from user where name="Steve" 1 update user set money="1000" where name="Steve" 2 select money from user where name="Karen" 3 update user set money="2200" where name="Karen" 4 2023/03/15

  39. SVVRL @ IM.NTU transaction (2/4) select money from user where name="Steve" 1 update user set money="1000" where name="Steve" 2 select money from user where name="Karen" 3 update user set money="2200" where name="Karen" 4 user name money Steve Karen 1000 2000 2023/03/15

  40. SVVRL @ IM.NTU transaction (3/4) select money from user where name="Steve" 1 update user set money="1000" where name="Steve" 2 select name,money from user 1 select money from user where name="Karen" 3 update user set money="2200" where name="Karen" 4 user name money Steve Karen 1000 2000 2023/03/15

  41. SVVRL @ IM.NTU transaction (4/4) select money from user where name="Steve" 1 select money from user set where name="Steve" 1 update user set money="1000" where name="Steve" 2 update user set money="1000" where name="Steve" 2 select money from user where name="Karen" 3 select money from user where name="Karen" 3 update user set money="2200" where name="Karen" 4 update user set money="2200" where name="Karen" 4 2023/03/15

  42. SVVRL @ IM.NTU transaction (1/3) transaction database query begin transaction commit transaction commit rollback transaction transaction 2023/03/15

  43. SVVRL @ IM.NTU transaction (2/3) <? $link = mysqli_connect( "localhost","user", "password","db_name" ); transaction begin mysqli_autocommit($link,false); transaction mysqli_commit($link); transaction commit ?> 2023/03/15

  44. SVVRL @ IM.NTU transaction (3/3) <? $link = mysqli_connect( "localhost","user", "password","db_name" ); transaction begin mysqli_autocommit($link,false); transaction if($transaction_result==true){ mysqli_commit($link); } else{ mysqli_rollback($link); } ?> transaction commit transaction rollback 2023/03/15

  45. SVVRL @ IM.NTU transaction (1/3) select money from user where name="Steve" 1 update user set money="1000" where name="Steve" rollback 2 select money from user where name="Karen" 3 update user set money="2200" where name="Karen" 4 user name money Atomicity Steve Karen 1200 2000 2023/03/15

  46. SVVRL @ IM.NTU transaction (2/3) select money from user where name="Steve" 1 update user set money="1000" where name="Steve" 2 select name,money from user 1 select money from user where name="Karen" commit 3 update user set money="2200" where name="Karen" 4 user name money Consistency Steve Karen 1200 2000 2023/03/15

  47. SVVRL @ IM.NTU transaction (3/3) select money from user where name="Steve" 1 select money from user where name="Steve" 1 update user set money="1000" where name="Steve" 2 update user set money="1000" where name="Steve" 2 select money from user where name="Karen" transaction lock 3 select money from user where name="Karen" 3 update user set money="2200" where name="Karen" 4 Isolation update user set money="2200" where name="Karen" 4 2023/03/15

  48. SVVRL @ IM.NTU HW#2 Responsive Web Design: Bootstrap Javascript jquery jquery UI jquery plugin PHP + SQL Transaction row-level lock API Line + dialogflow DNS + WAF + CDN + web server + database server + storage 2023/03/15

  49. SVVRL @ IM.NTU row-level lock (1/3) lock table lock row-level lock read lock write lock row-level lock row table lock table lock 2023/03/15

  50. SVVRL @ IM.NTU row-level lock (2/3) read lock O wait write lock wait wait read lock write lock read lock SQL lock in share mode write lock SQL for update 2023/03/15

Related


Mass Media and Communication for the Academic Year 2020/2021

Mass Media and Communication for the Academic Year 2020/2021

claire
Daily current affairs 2024(presentation)

Daily current affairs 2024(presentation)

KD
SSC CHSL CPO 2024 (presentation)

SSC CHSL CPO 2024 (presentation)

KD
10 Essential Skills to Consider When You Hire a PHP Developer

10 Essential Skills to Consider When You Hire a PHP Developer

henery
Media Ecology: Impact of Communication Technology

Media Ecology: Impact of Communication Technology

ellery
Introduction to PHP Development for Web Services

Introduction to PHP Development for Web Services

meghn
Development of Multiclock Cycle in Processor

Development of Multiclock Cycle in Processor

dbote
PHP Conditional Statements for Decision Making Logics

PHP Conditional Statements for Decision Making Logics

deocampo_f
Database Connectivity Methods in PHP Explained

Database Connectivity Methods in PHP Explained

meey256
Overview of PHP-Fusion: A Lightweight CMS with Comprehensive Features

Overview of PHP-Fusion: A Lightweight CMS with Comprehensive Features

guadalupe_p
Variables, Operators, and Data Types in PHP

Variables, Operators, and Data Types in PHP

isom_try
PHP Scripting Essentials: From Basics to Advanced Concepts

PHP Scripting Essentials: From Basics to Advanced Concepts

joll277
PHP Programming: Basics and Functions

PHP Programming: Basics and Functions

bayl_2
PHP File I/O Functions and Query Strings Explained

PHP File I/O Functions and Query Strings Explained

dan_men
Introduction to PHP Scripting Language and Operators

Introduction to PHP Scripting Language and Operators

keleigh
PHP File Handling Functions Overview

PHP File Handling Functions Overview

hirs_sif
Accessing MySQL Database Using PHP and PDO

Accessing MySQL Database Using PHP and PDO

popp_rah
The Fetch-Decode-Execute Cycle in Computer Processing

The Fetch-Decode-Execute Cycle in Computer Processing

riverl
Comparison Study Between ExoMars and Sample Fetch Rover Visual Localization Algorithms

Comparison Study Between ExoMars and Sample Fetch Rover Visual Localization Algorithms

fitz_21
Modern Web Development Techniques

Modern Web Development Techniques

mrece
Human Interaction with Media - The Media Equation by Reeves and Nass

Human Interaction with Media - The Media Equation by Reeves and Nass

kean239
Arrays in PHP Programming

Arrays in PHP Programming

nick_ett

More Related Content