{"id":8737,"date":"2022-08-21T00:50:07","date_gmt":"2022-08-20T23:50:07","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=8737"},"modified":"2023-10-29T21:28:43","modified_gmt":"2023-10-29T21:28:43","slug":"building-a-php-website-input-button-for-db-connection","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/building-a-php-website-input-button-for-db-connection\/","title":{"rendered":"Building A PHP Webpage Input Button for DB Connection"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

First PHP Lesson Today, with tutor - DB\/prog guru Joe Moore.<\/p>\n

https:\/\/databasejoe.com\/<\/a><\/p>\n

This lesson will rely on you researching required VSCode shortcuts yourself: \"Ctrl \/\" and \"Shift 1\" plus the usual Save, Select All, Undo etc - which you know..? See main site page if not.<\/p>\n

Install VS code from .deb https:\/\/code.visualstudio.com\/download<\/a><\/p>\n

sudo apt install mysql-workbench phpmyadmin<\/span><\/p>\n

I'm completely new to PHP programming, and programming in general is my nemesis...but plod on, there's a massive skills shortage! (Any wonder with the complexity of programming?!)<\/p>\n

I like to work on projects that achieve something, not just exercises for the sake of it, as there's no sense of achievement, so Joe suggested we work on a \"real world\" example - an text input box with a submit button. I later asked to have it update a database table, so we did! Here's how...<\/p>\n

First, In VS Studio, we added the PHP extension PHP Intellisense :<\/p>\n

\"\"<\/p>\n

A practical first page was written into the directory \/var\/www\/myfirstwebform\/phpinfo.php\u00a0 using the Add Page + button:<\/p>\n

\"\"<\/p>\n

VS Studio autocomplete is used by typing first few letters of desired code, then Rtn highlighted text:<\/p>\n

\"\"<\/p>\n

\n
<?php<\/div>\n
echo phpinfo(); \/* this will give table form page of PHP version.<\/div>\n
Type phpinfo.php after folder in addr bar *\/<\/div>\n
?><\/div>\n<\/div>\n
<\/div>\n
Ctrl S to save, then go to your \/var\/www\/<yourdir> folder in your browser address bar - in my case a subdir of \/var\/www\/myphpsite\/myfirstwebform\/<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Type phpinfo.php in the addr bar - if you click the file, Chrome will want to download it, not run it!<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Next we built the index.html in stages.\u00a0 A new file in VSCode again using the code completion of VSCode:<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Using Ctrl \/, to Autofill a comment box\u00a0 and type comment in the middle:<\/div>\n
\n
\n
<!-- meta tag is info, ctrl \/\u00a0 for comment fill, but only ABOVE other code else overwrites it --><\/span><\/div>\n<\/div>\n<\/div>\n
<\/div>\n
To add the html skeleton, type Shift 1.<\/div>\n
A box shows with the code, so Enter to add the code:<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
In the <body> section, the actions and DB table info will be placed. The DB tables will be added to the DB table later, for the webpage text input to be sent to, after the page box and button is working first:<\/div>\n
<\/div>\n
\n
\n
<!-- for form, type form, then Up\/Down for menu from select box --><\/span><\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Start typing\u00a0 \"action\" after \"form \", then enter when button explanation shows:<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
With cursor in the \"action=\", type \"form\", enter on menu:<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Continue with text completions as per full code below:<\/div>\n
---<\/div>\n
\n
\n
<!-- shift + 1 for html skeleton--><\/span><\/div>\n
<!DOCTYPE html5> <!--use html5 tab--><\/span><\/div>\n
<html lang=\"en\"><\/span><\/div>\n
<head><\/span><\/div>\n
<!-- meta tag is info, ctrl \/ , but only ABOVE other code else overwrites it --><\/span><\/div>\n
<metacharset=\"UTF-8\"><\/span><\/div>\n
<metahttp-equiv=\"X-UA-Compatible\"content=\"IE=edge\"><\/span><\/div>\n
<metaname=\"viewport\"content=\"width=device-width, initial-scale=1.0\"><\/span><\/div>\n
<title>Document<\/title><\/span><\/div>\n
<\/head><\/span><\/div>\n
<body><\/span><\/div>\n
<!-- for form, type form, then Up\/Down for menu from select box --><\/span><\/div>\n
<formaction=\"form.php\"method=\"post\"><!--post is pushing data, get is pulling--><\/span><\/div>\n
<inputtype=\"text\"name=\"sometext\"\/><\/span><\/div>\n
<inputtype=\"submit\"value=\"Submit Text\"\/><\/span><\/div>\n
<\/form><\/span><\/div>\n
<\/body><\/span><\/div>\n
<\/html><\/span><\/div>\n<\/div>\n<\/div>\n
---<\/div>\n
<\/div>\n
\"\"<\/span><\/div>\n
<\/div>\n
Once the form is complete, it can be tested in your browser. Type the form name as below in the address bar:<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
With no DB added yet, the default behaviour of the button for any added text may be to offer to download the form.php file:<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
Let's add a DB named after the elements in the next code file: A DB named myphpsite, with a table named \"text\". The code is entered into a file named form.php:<\/div>\n
<\/div>\n
---<\/div>\n
\n
\n
<?php<\/div>\n
$sometext = $_POST['sometext']; \/\/ variable POST is php specific - single line comment<\/div>\n
\/*<\/div>\n
multi line comment<\/div>\n
*\/<\/div>\n
\/\/connect to mysql<\/div>\n
$db = new mysqli(\"localhost\",\"stevee\",\"poop\",\"myphpsite\"); \/\/ host, user, passwd, DBname<\/div>\n
\/\/ connection error msg<\/div>\n
if ($db->connect_errno) { \/\/ connect_errno is property of mysqli class (w3 skool bad code spaces origin)<\/div>\n
echo\"Failed to connect to MySQL: \".$db->connect_error;<\/div>\n
exit();<\/div>\n
}<\/div>\n
\/\/ insert into mysql query<\/div>\n
$sql = \"INSERT INTO text (sometext) VALUES ('$sometext')\" ; \/\/ DB Table = \"text\". Var sometext puts input varchars to column<\/div>\n
if ($db->query($sql))<\/div>\n
{<\/div>\n
echo\"Added to database\" ;<\/div>\n
}if($db->errno)<\/div>\n
{<\/div>\n
echo\"failed to insert into database: $db->error\" ; \/\/ can also be shown as to concat \".\"<\/div>\n
}<\/div>\n
?><\/div>\n
<!DOCTYPE html><\/div>\n
<html lang=\"en\"><\/div>\n
<head><\/div>\n
<metacharset=\"UTF-8\"><\/div>\n
<metahttp-equiv=\"X-UA-Compatible\"content=\"IE=edge\"><\/div>\n
<metaname=\"viewport\"content=\"width=device-width, initial-scale=1.0\"><\/div>\n
<title>Document<\/title><\/div>\n
<\/head><\/div>\n
<body><\/div>\n
<p>You typed in the word: <?phpecho$sometext?><\/p><!-- echos the value of text box input of sometext--><\/div>\n
<\/body><\/div>\n
<\/html><\/div>\n<\/div>\n<\/div>\n
<\/div>\n
---<\/div>\n
<\/div>\n
I added the DB in mysql:<\/div>\n
sudo mysql -u root -p<\/span><\/div>\n
<\/div>\n
\n

mysql> create database myphpsite ;<\/span>
\nQuery OK, 1 row affected (0.01 sec)<\/span><\/p>\n

mysql> show databases ;<\/span>
\n+------+<\/span>
\n| Database |<\/span>
\n+------+<\/span>
\n| information_schema |<\/span>
\n| DebianAdmin |<\/span>
\n| ElectronicsStuff |<\/span>
\n| myphpsite |<\/span>
\n| mysql |<\/span>
\n| performance_schema |<\/span>
\n| phpmyadmin |<\/span>
\n| python_progs |<\/span>
\n| srdb |<\/span>
\n| sys |<\/span>
\n| test |<\/span>
\n| wordpress |<\/span>
\n| wp |<\/span>
\n+------+<\/span>
\n13 rows in set (0.00 sec)<\/span><\/p>\n<\/div>\n

Now, a table named \"text\" can be created in the DB, as seen named in the code on line\u00a0 19:<\/div>\n
\n
\n
$sql = \"INSERT INTO text (sometext) VALUES ('$sometext')\" ; \/\/ DB Table = \"text\". Variable $sometext puts input varchars to the column of the DB table.<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
Just for variation, I'll use phpmyadmin.<\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
In SQL preview you can also get the SQL code if you wish to use mysql command line to create the table:<\/div>\n
CREATE<\/a><\/span>\u00a0TABLE<\/a><\/span>\u00a0`myphpsite`<\/span>.`text`<\/span>\u00a0(\u00a0`sometext`<\/span>\u00a0VARCHAR<\/a><\/span>(255<\/span>)\u00a0CHARACTER<\/a><\/span>\u00a0SET<\/a><\/span>\u00a0utf8\u00a0COLLATE<\/a><\/span>\u00a0utf8_unicode_ci\u00a0NOT<\/a><\/span>\u00a0NULL<\/span>\u00a0)\u00a0ENGINE<\/span>\u00a0=\u00a0InnoDB<\/span>;<\/div>\n
<\/div>\n
Once created I had to reboot Mint to get it to work, just restarting with:<\/div>\n
sudo service mysql restart<\/span><\/div>\n
sudo service mysql apache2<\/span><\/div>\n
<\/div>\n
did not work properly, as the page kept offering to DL the form.<\/div>\n
<\/div>\n
Now it accepts the text and stores it in the DB table:<\/div>\n
<\/div>\n
\"\"<\/div>\n
Now you can try to break it or generate error, example add more than 255 characters that the VARCHAR field was set to:<\/div>\n
<\/div>\n
Interesting..I found it could go a couple of chars over 255 before complaining. I generated 256 letter \"a\" 's\u00a0 using the command line example on the main site page and amended it to suit then put the chars in a text file to count them with wc -m<\/span>:<\/div>\n
<\/div>\n
for x in {0..255}; do printf a ; done > Desktop\/256as.txt<\/span><\/div>\n
<\/div>\n
Checking the chars count should be 256 (0-255) :<\/div>\n
stevee@localhost:~$ wc -m Desktop\/256as.txt<\/span>
\n256 Desktop\/256as.txt<\/div>\n
<\/div>\n
\n
\n
Opening with a text editor,\u00a0 SelectAll text then pasted into the page submit field, I got, as expected:<\/div>\n<\/div>\n
<\/div>\n
\n

failed to insert into database: Data too long for column 'sometext' at row 1<\/span>You typed in the word: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.......<\/span><\/p>\n<\/div>\n

\n
<\/div>\n<\/div>\n<\/div>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

First PHP Lesson Today, with tutor - DB\/prog guru Joe Moore. https:\/\/databasejoe.com\/ This lesson will rely on you researching required VSCode shortcuts yourself: \"Ctrl \/\" and \"Shift 1\" plus the usual Save, Select All, Undo etc - which you know..? See main site page if not. Install VS code from .deb https:\/\/code.visualstudio.com\/download sudo apt install ...\u00a0 Building A PHP Webpage Input Button for DB Connection<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8737","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"a3_pvc":{"activated":true,"total_views":1,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/8737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=8737"}],"version-history":[{"count":56,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/8737\/revisions"}],"predecessor-version":[{"id":10108,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/8737\/revisions\/10108"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=8737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=8737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=8737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}