Category: PHP

PHP – set hour to Eastern European Time(Bucharest)

This is the test script, you normally just need the first line of code.
Enjoy!

PHP CODE SET TIMEZONE
PHP
1
2
3
4
5
6
<?php
date_default_timezone_set("Europe/Bucharest");
echo date_default_timezone_get();
echo "<br>";
echo date("Y,m,d / G:i:s");
?>

jQuery (Ajax) Contact form with all elements

This is my default CONTACT form built with jQuery and CSS.
The form uses a jQuery call to a PHP script that inserts data into a Mysql DB and sends two emails of confirmation, all this under the hood… meanwhile, there is a CSS only animation that displays a message that the data is been sent to the server and shows a positive message if that data was sent without errors and an error message if there was an error.

Ajax Call
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(document).ready(function(){
 
var request;
 
$("#contact-form").submit(function(event){
 
    event.preventDefault();
 
    if (request) {
        request.abort();
    }
    var $form = $(this);
    var $inputs = $form.find("input, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    request = $.ajax({
        url: "contact-form.php",
        type: "post",
        data: serializedData
    });
    request.done(function (response, textStatus, jqXHR){
        //console.log("Hooray, it worked!");
        $(".show-success").slideToggle();
        //$(".hide-contact").slideToggle();
    });
 
    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
        $(".show-error").slideToggle();
 
    });
 
 
    request.always(function () {
        $inputs.prop("disabled", false);
    });
 
});
 
});

CSS Only Spinner and FORM STYLES
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
.frm{padding:9px;border-radius: 3px;background:#ECEFF1;font-size: .8em; border:0px; width: 100%;font-weight: 300;box-sizing: border-box;}
.frb{background:#3498DB}
.pt-12{padding-top:12px}.small{font-size: .8em}
.hide{display:none}
.org-bg{background:#E74C3C;padding: 12px;border-radius: 3px;margin-bottom: 12px;color: #fff}.grn-bg{background:#52BE80;padding: 12px;border-radius: 3px;margin-bottom: 12px;}
.orange-bg{font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;}
.fc{padding-bottom:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:1.2em}
 
#loading{display:none}
 
.spinner {
  margin: 0px auto 0;
  width: 70px;
  text-align: center;
}
 
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;
 
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
 
.trimit{background: rgba(149, 192, 234);padding: 12px; border-radius: 3px;margin-top:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;}
</style>

HTML CONTACT FORM (with some FontAwesome icons)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- form ROW -->
<div class="row pt-12x">
 
<div id="loading">
<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
 
<div class="trimit"><i class="far fa-paper-plane fa-fw"></i> Se trimit datele...</div>
 
</div>
 
<!-- Error Handlers --><div id="show-success"></div>
<div class="grn-bg orange-bg list-font-1 hide show-success"><i class="fas fa-check-square fa-fw"></i> <b>Vă mulțumim!</b> Am primit mesajul dumneavoastră.</div>
<div class="org-bg orange-bg list-font-1 hide show-error"><i class="far fa-question-circle fa-fw"></i> <b>Eroare!</b> Mesajul nu a fost trimis.</div>
<!-- .Error Handlers -->
<!-- form --> <form id="contact-form">                        
  <div class="hide-contact">
<div class="fc"><i class="fas fa-user fa-fw brown"></i> Formular contact</div>
 
            <div>
              <input type="text" name="name" class="frm" placeholder="Nume" required="">
            </div>
            <div class="pt-12">
              <input type="text" name="email" class="frm" placeholder="Email@exemplu.com" required="">
            </div>
 
            <div class="pt-12">
              <input type="text" name="phone" class="frm" placeholder="Număr telefon" required="">
            </div>
 
            <div class="pt-12">
              <textarea name="message" class="frm" rows="6" placeholder="Mesaj..."></textarea><input type="text" name="city" value="" class="hide">
 
            </div>
 
<div class="pt-12 small"><i class="fas fa-lock fa-fw green"></i> Protecția datelor <small>(GDPR) (EU) 2016/679 <a href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation"><i class="fas fa-external-link-alt fa-fw"></i></a></small></div>
 
            <div class="pt-12">
              <button type="submit" class="frm frb dsblb"><i class="fas fa-paper-plane fa-fw"></i> Trimite</button>
            </div></form>
</form>
 
</div> <!-- ./hide-contact -->
          
 
 
</div>
<!-- ./form-ROW -->

PHP Script that handles the form data
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?php
 
// v1.0 090318
 
if(isset($_POST['city']) && !empty($_POST['city'])) {
 
echo "Hello Robot!";
 
exit;
 
}
 
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
 
echo "Hello Robot 2!";
 
exit;
 
}
 
$today = date("d/m/Y - G:i ");
 
/////////////////////
///////////
/////////
///////
/////
//
 
 
 
include_once("_connect.php");
 
// _POST Vars...
 
$name     = htmlentities($_POST['name']);
$email     = htmlentities($_POST['email']);
$phone     = htmlentities($_POST['phone']);
 
$message1   = htmlentities($_POST['message']);
 
$data = time();
 
$sql = "INSERT INTO table_name
(name, email, phone, message, data)
VALUES
('$name', '$email', '$phone', '$message1', '$data')";
 
 
 
 
 
if ($conn->query($sql) === TRUE) {
 
//////
 
//////
 
 
 
///
 
// yeyy! Mail to owner...
 
 
 
 
 
$to_owner = "me@example.com";
$subject_owner = "New message from...";
 
$message_owner = "
<html>
<head>
<title>New message</title>
</head>
<body>
<p><h3>Mesaj nou pe site...</h3></p>
<p>Detalii mesaj:</p>
<ul>
<li>Name: $name</li>
<li>Phone: <a href=\"tel:$phone\">$phone</a></li>
<li>Email: $email</li>
<li>Data: $today</li>
<li>Message: $message1</li>
</ul>
</body>
</html>
";
 
// Always set content-type when sending HTML email
$headers_owner = "MIME-Version: 1.0" . "\r\n";
$headers_owner .= "Content-type:text/html;charset=UTF-8" . "\r\n";
 
// More headers
$headers_owner .= 'From: Name<contact@example>' . "\r\n" . "Reply-to: $email" . "\r\n";
$headers_owner .= 'Cc: carbon-copy@example.com' . "\r\n";
 
mail($to_owner, $subject_owner, $message_owner, $headers_owner);
 
 
 
 
 
 
 
/////////////////
/// +++++++++++++++++++++ /////
 
 
 
 
 
 
 
 
 
exit;
 
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
 
?>

Mysql: Table structure for table `contact`

This is the basic table structure for my contact section on many projects I work on…
The id field is auto_increment and the time field is just a PHP time() string.

MySQL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
CREATE TABLE `contact` (
  `id` int(11) NOT NULL,
  `Name` varchar(30) NOT NULL,
  `Email` varchar(90) DEFAULT NULL,
  `Message` varchar(5000) DEFAULT NULL,
  `time` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
ALTER TABLE `contact`
  ADD KEY `id` (`id`);
 
ALTER TABLE `contact`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

PHP & HTML – easy spam prevention using hidden form fields (sample code)

The easy and fast working method of securing your forms agains spam bots is as easy as a few lines of PHP and HTML code.

Spam bots, at least, most of them, crawl random websites and fill their forms with all kind of ads or unwanted content. There are a lot of alternatives to stop this, Google Captcha, reCaptcha, etc., I used all of this methods, they work pretty well but, sometimes, when you move your site to a new server or domain, you need to spend a lot of time working around this methods to make them work again.

I simply tried a really simple method that I found a few years ago, the method implies using simple PHP and HTML to trick the bot to fill a field that the user doesn’t see(hidden via CSS).

The code is pretty simple…

Here is the HTML…

HTML CODE
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="sample.php">
 
<input type="text" name="name" placeholder="Nume" required="">
<input type="text" name="email" placeholder="Email" required="">
<input type="text" name="phone" placeholder="Telefon" required="">
 
<input type="text" name="city" class="vho" id="send" placeholder="Paris">
 
<button type="submit">Submit</button>
</form>
 
<style>
.vho { display: none }
</style>

 

Here is the PHP…

PHP CODE...
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
 
if(isset($_POST['city']) && !empty($_POST['city'])) {
 
echo "Hello SPAM Robot!";
 
exit;
 
}
 
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone'])) {
 
echo "Hello SPAM Robot 2!";
 
exit;
 
}
 
?>

How to Optimize Your Website And Obtain a Google Page Speed of 98-100?

First, please backup your files before you start modifying anything I write in this post.

Thank You!

First, why you should follow my advice? Well, almost anyone can tell you that a fast website is a good website and a good website is a mobile and desktop 100% compatible website but, as a developer, you need to test your site with Google’s Page Speed tool(https://developers.goo…).

Obtaining a good grade there can help your search engine traffic… So, what Google Page Speed score your project gets?

I’ve done a few projects with 98-99 out of 100, and a few with perfect 100.

I will list here a few “secrets” I used to boost my grade from 68/100 to 99/100.

1. Use only inline CSS

You need to use only inline css, period. Don’t link to any external frameworks(Bootstrap, etc.), don’t link to any Google Fonts file, to any particular style…

If you want to be productive, you ca use PHP to include_once(“”); your css files into the interpreted file.

If you want to use fontawesome or Google Fonts, you can put fontawesome file before you close your </body> tag.

You can also modify the Google Fonts .css file and include it inline into your source via PHP. Also, you can remove all the Vietnamese or Greek fonts from the Google Fonts file and use only the Latin style, works with english projects and most of the languages.

2. Insert the .js files at the end of the file

This is no secret that, inserting the .js files before you close </body> tag can get you a good Page Speed grade.

3. Use Server Side compression(gzip)

This is a pretty easy step, I provided instructions here on another post on how to do that.

4. Optimize images

Don’t exaggerate with images, use a low resolution image thumbnail, I use only < 10kb images. Specify the width and height of the image. You can use a free online tool to reduce the size of the images.

5. Minify css, js and html

This step gives anyone a lot of work if you are updating your site constantly… You can use free online tools to minify your css, html and js code.

6. Reduce the Server Response Time

Don’t load your server with requests, use, as much as you can only static content or make Ajax requests to content.

Bonus Point!

Transform your favicon in BASE64 text and include the code via PHP and get rid of a few connections that can slow down your website… I use this tool to convert my favicons: https://xaviesteve.co…

 

Hope this experience helps, try and play with this list and tell me your result.

Take a look at a sample page that I’ve recently made and got a great score: https://developers.google.com…

jQuery load() external file inside div

Sometimes I use the jQuery load() function to display dynamic content inside html elements. As the description says:

load() Description: Load data from the server and place the returned HTML into the matched element.

I provided a working example that loads a simple html file with html tags and another php files that contains variables.

Here is the jQuery code:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
 
$(".click-html").on('click', function() {
  $( ".load-html" ).load( "load.html" );
});
 
$(".click-php").on('click', function() {
  $(".load-php").load("click.php?var1=var1value&var2=var2value");
});
 
});

Here is the PHP code that deals with the two variables:

PHP code
PHP
1
2
3
4
5
6
7
8
<?php
echo $_GET["var1"];
echo "<br>";
echo $_GET["var2"];
if($_GET["var2"] == "var2value") {
echo "<hr>";
}
?>

Live Demo Here

The simplest way for gzip compression (PHP)

ob_start("ob_gzhandler") returns FALSE if browser doesn’t support gzip, so then is called normal ob_start();

PHP gzip compression
PHP
1
<?php if(!ob_start("ob_gzhandler")) ob_start(); ?>

You can use the browser header information to see if the page is compressed or a tool that checks this for you.

MySQLi Object-Oriented PHP Database Connection

PHP - Mysql logoBefore we do anything with our project, we need to access the data stored in the MySQL database. For that, we need to be able to connect to the database server.

  • MySQL is the most popular database system used with PHP.
  • With PHP, you can connect to and manipulate databases(insert, edit, delete data).

You can create a connect.php file that contains this functionality so that you can include(“connect.php”); anywhere you need mysql along your project.

You can use a simple – MySQLi Procedural – type of connection or you can use a MySQLi Object-Oriented connection type or a PDO connection (PHP Data Objects).

Most of the people I know are using a MySQLi Object-Oriented connection like this:

MySQLi Object-Oriented
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$server_name = "localhost";
$username = "mysql_username"; // Your Mysql database username
$password = "mysql_password"; // Your Mysql database password
 
// Create a connection using OOP
$conn = new mysqli($server_name, $username, $password);
 
// Check connection for errors
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
// This line is for testing only...
// echo "Connected successfully!";
?>

Also, the simple procedural method looks almost the same as the OOP method, with a small difference:

MySQLi Procedural method
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$server_name = "localhost";
$username = "username"; // Your Mysql username
$password = "password"; // Your Mysql password
 
// Create connection using non-OOP method
$conn = mysqli_connect($servername, $username, $password);
 
// Check connection for errors using the old die() call
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
// Only for testing echo "";
// echo "Connected successfully";
?>

Most of the projects can handle the database with the two methods from above, along this, there is another method for a connection this time using PDO (PDO is an acronym for PHP Data Objects. PDO is a lean, consistent way to access databases. This means developers can write portable code much easier. PDO is not an abstraction layer like PearDB. PDO is a more like a data access layer which uses a unified API)

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$server_name = "localhost";
$username = "username"; // Your Mysql username
$password = "password"; // Your Mysql password
 
try {
    // dbname=mydatabase is your database name
    $conn = new PDO("mysql:host=$server_name;dbname=mydatabase", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Connected successfully";
    }
catch(PDOException $e)
    {
    echo "Connection failed: " . $e->getMessage();
    }
?>