Scribd
Upload
74 views25 pages

Data Manipulation: Basic

This document provides instructions for manipulating data in a MySQL database using AJAX and PHP. It discusses using XMLHttpRequest objects to interact with servers without page refreshes. It also covers creating a MySQL connection in PHP, building a form to collect data, and using PHP files to add data to a database table and retrieve records. Code examples are given for setting up the database table, connecting to MySQL, adding data with AJAX, and getting data to display on the page.

Uploaded by

Ninia Celso Cello
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
74 views25 pages

Data Manipulation: Basic

This document provides instructions for manipulating data in a MySQL database using AJAX and PHP. It discusses using XMLHttpRequest objects to interact with servers without page refreshes. It also covers creating a MySQL connection in PHP, building a form to collect data, and using PHP files to add data to a database table and retrieve records. Code examples are given for setting up the database table, connecting to MySQL, adding data with AJAX, and getting data to display on the page.

Uploaded by

Ninia Celso Cello
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

z

Data
BASIC

Manipulation
Eman Gumayagay alias ‘Pogi’
z
TOPIC POINTERS

o INTRODUCTION
o AJAX / XML HTTP REQUEST
o MYSQL CONNECTION
o CREATING INFO TABLE DATA
z
INTRODUCTION

A data manipulation language is a computer


programming language used for adding, deleting, and
modifying data in a database
z
AJAX / XML HTTP REQUEST

(XHR) objects are used to interact with servers. You can


retrieve data from a URL without having to do a full page refresh.
This enables a Web page to update just part of a page without
disrupting what the user is doing.

CONSTRUCTOR
The constructor initializes an
XMLHttpRequest. It must be called
before any other method calls.
z
AJAX / XML HTTP REQUEST

OPEN The method open() initializes a newly-created


request, or re-initializes an existing one.

READY STATE CHANGE

Fired whenever the state of the request


changes.

SEND
Sends the request. If the request is
asynchronous (which is the default), this
method returns as soon as the request is sent.
z
HTTP REQUEST STATES
z
HTTP REQUEST METHODS
GET
POST
PUT The two most common HTTP methods are: GET
HEAD and POST.
DELETE
PATCH
OPTIONS GET METHOD POST METHOD
CONNECT
TRACE GET is used to request
POST is used to send data
data from a specified
to a server to create/update
resource.
a resource.
Note that the query string
The data sent to the server
(name/value pairs) is sent in
with POST is stored in the
the URL of a GET request:
request body of the HTTP
request:
z
WHY WE NEED TO USE PHP?

o JavaScript can’t connect directly on MySQL Database

o PHP can directly connect and manipulate Back and Forth


data in Database
o We can use Ajax to request and send data to a PHP file.

o It is free, open source and server-side (the code is executed


on the server)
z
MYSQLi CONNECTION

You can create MYSQLi Connection


using the new mysqli()

It requires 4 parameter, server name,


username, password and database
name

o Server – What currently the host of your project


o Username – Who is on control (Default username is root)
o Password – Password of User (Default is none)
o Database – Target Database
z
CREATING INFO TABLE DATA - 1

o First, Open your Xampp run Apache and MySQL service

o Create a working folder for our new activity inside of htdocs of


xampp directory
o Open VSCode and open your target folder

o And we need to create 4 Files.


z
CREATING INFO TABLE DATA - 2

Inside index.php
Create a basic HTML
Structure with a script tag
after the body
z
CREATING INFO TABLE DATA - 3

In index.php, place this


HTML Code inside the
body.

In this Form we have 3


fields, name, age and
address
z
CREATING INFO TABLE DATA - 4
Inside of the script tag on file index.php

And after the Ajax function add


listener to a form
z
CREATING INFO TABLE DATA - 5
Open connect.php and initialize
a new mysql connection

This will create a


connection between your
file and mysql database.

Make sure that


information and database
name was correct.
z
CREATING INFO TABLE DATA - 5
Open your browser and browse
localhost/phpmyadmin

This will go to mysql


admin platform
z
CREATING INFO TABLE DATA - 5

Create New Database, name


datas

Create New Table name


of info
z
CREATING INFO TABLE DATA - 6
Follow this
configuration
Make sure all of
the columns are
the same as
illustration

We have created
columns, id, name,
age, address,
date_created
Click save if done
z
CREATING INFO TABLE DATA - 7

Inside addData.php, add


this line of codes

This file will manage the


entry of our data to the
database.
z
CREATING INFO
TABLE DATA - 8

Inside getData.php, add


this line of codes

This file will get our records


in database, and return it
on our request.
z
CREATING INFO TABLE DATA - 9

Go back to our index.php


And find this line of code
Inside of that element we
will place this line of code
z
CREATING INFO TABLE DATA - 9

Open your browser and open


localhost/ FOLDER NAME

Note: Make sure that your folder


is located inside htdocs xampp
directory.

Commonly it located to: C:\\


xampp\htdocs\
z
CREATING INFO TABLE DATA - 10

After submitting the form we


should see the data we insert on
the database
z
CREATING INFO
TABLE DATA - EXTRA

We will design our project using CSS


Open the index.php and after the
title element create a style tag with
the following styles properties
z
CREATING INFO
TABLE DATA - EXTRA

After putting the styles it should be


look this.

And there you have it.


z

THANK YOU

You might also like