Original subtitles

1 1

Hello everyone, it's Jonas 2

2

and I'm back with another bonus lecture for this course. 3

3

And I know that many students have been waiting for this one 4

4

and because in this lecture 5

5

we will finally make our contact form work 6

6

using some very simple PHP 7

7

that I will provide you along the way. 8

8

So but first let's distinguish here 9

9

between the client side and the server side code. 10

10

So far we've been using HTML, CSS, and JavaScript 11

11

which is code that runs in the browser. 12

12

Which means that it's client side code. 13

13

Now, on the other hand, 14

14

we have server side code such as PHP, Microsoft.NET, 15

15

or the Ruby and Rails framework 16

16

which is code that is executed on the server. 17

17

Client side then interacts with the server side. 18

18

In our example that we will work on in this lecture 19

19

the browser will send our form data 20

20

to the PHP script, which is on the server. 21

21

This script will then send an email 22

22

and return a success code to the browser. 23

23

So this means that this will only work 24

24

if you already have your website hosted 25

25

on a web server in the internet. 26

26

So this will really not work on your local computer. 27

27

So again, you need to have this online 28

28

in order to make this work. 29

29

So this is our HTML file 30

30

and maybe you will notice here on this side 31

31

I have these small icons now 32

32

and they're really handy 33

33

to distinguish between different file types 34

34

and this is just a small brackets plugin, 35

35

which is called brackets icons. 36

36

So you can just install it 37

37

and see if you like this kind of icons here. 38

38

So let's just go down here to our form. 39

39

Yeah, so here it is. 40

40

So we will use a PHP file, which will be a script 41

41

hosted on our server, 42

42

which will be called mailer.php 43

43

and this is a script that will be executed 44

44

once the user clicks here on this submit button. 45

45

So I will now take a look with you at this PHP script. 46

46

I already wrote this and it's available for downloads 47

47

right from this lecture. 48

48

So as this is not a PHP course 49

49

I will not teach you a step-by-step 50

50

how to write this code 51

51

but I will of course go with you through the script 52

52

so that you understand the basics of it so how it works. 53

53

So here in this first part we have three variables 54

54

which will have the name that the user enters 55

55

into the form, the email address, as well as the message. 56

56

And these functions here 57

57

they basically remove the HTML tags 58

58

and wide space from the variables that the user enters. 59

59

So and then next here these variables will be checked. 60

60

So if the name that the user entered is empty 61

61

or if the message is empty 62

62

or if the email address is not valid 63

63

then we will be redirected to our website 64

64

with this success code here, minus one in this case, 65

65

and we will see later in the lecture 66

66

how to handle this. 67

67

So we will handle this with an error message. 68

68

And after that this script will be exited 69

69

and that's it in this case. 70

70

So this is what happens when there is an error. 71

71

So in case they're not 72

72

then the script will be executed further down. 73

73

So we reach this point here 74

74

we need to define the next variable 75

75

which is the email address that we want email to be sent. 76

76

In this case this is my email address 77

77

hello@webdesigncourse.co 78

78

and the next step will be to define the subject 79

79

of the message that will be sent 80

80

of the email that will be sent. 81

81

And next just the simple content. 82

82

So here we use these variables that we defined before, 83

83

the name and the email and the actual message 84

84

so that we can build a nice email from it. 85

85

Next we need to define email headers. 86

86

This is something that is part of every email. 87

87

It's not visible to the user 88

88

but it's part of an email that is sent. 89

89

And then finally here is the most important PHP function 90

90

which is mail. 91

91

It takes the recipient, so our email address; 92

92

the subject, the email content, which is this here; 93

93

and the email header. 94

94

So these four variables are used by this function 95

95

and are then sent to hello@webdesigncourse.co. 96

96

So you will of course update this 97

97

to the email address 98

98

that you want the form to send emails to. 99

99

Actually back here, don't need this. 100

100

And finally, after sending the email 101

101

we will redirect to our website 102

102

this time with the success code one. 103

103

So this is the success code 104

104

and not an error code. 105

105

After that we have this little part here 106

106

and what this does is to go directly to the place 107

107

in the website which has an ID form. 108

108

So let's just quickly add this one 109

109

in the HTML file. 110

110

So I'll put this ID right here 111

111

where I want the code to go then. 112

112

So probably here is a good place, 113

113

no, maybe better here actually. 114

114

So ID will be just four, alright? 115

115

So as I'm still here on my computer 116

116

and didn't upload anything yet 117

117

I'm not able to test it so far. 118

118

So I will now quickly make the success and the error boxes 119

119

that I mentioned before 120

120

so that we can give the user a nice feedback 121

121

telling them that their mail was sent 122

122

or that there was some kind of error. 123

123

So now we'll do that right here 124

124

at the beginning of the form, actually. 125

125

So we use a simple div here 126

126

and I will call this one 127

127

form messages. 128

128

And we will do separate classes for the success. 129

129

So in this case, in the success case 130

130

we can say something like, 131

131

"Thank you! 132

132

"Your message has been sent." 133

133

And now we can just format this in CSS 134

134

like you're already used to do. 135

135

So form messages, messages sorry. 136

136

Alright, so let's give it some width. 137

137

Let's say for example 70% for now 138

138

and we want to center it, 139

139

margin zero and auto. 140

140

One more thing that I noticed here right now 141

141

is this red icon here, 142

142

this is yet another brackets plugin, 143

143

a very handy one. 144

144

It's called the interactive linter. 145

145

I will just show it to you 146

146

so you can install it for yourself 147

147

because I really recommend you to do it. 148

148

It is this one, interactive linter. 149

149

So you install it 150

150

and it will help you avoid bugs in your code. 151

151

So in this case it knows that I have some mistake here 152

152

and so it puts this little icon here 153

153

so I can immediately find the error. 154

154

And it also gives me this warning icon down here. 155

155

So this is really great. 156

156

It's really helpful and it will help you 157

157

making last mistakes basically. 158

158

So again back to our code and now the icon is gone. 159

159

Now everything's fine. 160

160

So we can continue here with the code. 161

161

Give it some padding like 10 pixels for now. 162

162

As always, we design in the browser. 163

163

We just do some default styling 164

164

and then after that we see how it looks 165

165

and then eventually change it if necessary. 166

166

So we can have a nice border radius as well. 167

167

Let's say three pixels. 168

168

And then probably margin to the bottom of 169

169

I will try 20 pixels. 170

170

So let's take now a look at this. 171

171

Alright, so all the website as we know it. 172

172

And here's our little box. 173

173

So something doesn't look so good here 174

174

but let's take care of that later probably. 175

175

So now I want some background color here. 176

176

I will say that I want a green color for the success message 177

177

and a red color for the error box, alright? 178

178

So let's then define the success class 179

179

and all we need here is actually the background color. 180

180

Sorry, success. 181

181

So the background color and we want a nice little green. 182

182

So I will just 183

183

some random color so that I can now hit Control + E, 184

184

or Command + E on a Mac, 185

185

to choose that green color. 186

186

I should probably use one of the tools 187

187

that I showed you before for choosing this color 188

188

but right now I will just pick some green color 189

189

from this color picker here 190

190

and later if you want you can then adjust it for you, 191

191

the green color that you like more 192

192

or that is more suitable for your website, whatever. 193

193

So let's just see how it looks like with this one. 194

194

It look like anything at all here what's wrong here? 195

195

Yeah, here it is. 196

196

Of course, success was misspelled. 197

197

So now it should work, alright. 198

198

So it's a nice green box here. 199

199

Maybe we could even make it transparent 200

200

so that the map is still visible. 201

201

Maybe this looks better. 202

202

So again, I will hit Command + E 203

203

and then down here I choose the transparency level, 204

204

09 could be great. 205

205

Maybe even 07, 206

206

just look like. 207

207

A little too much, so 08. 208

208

Yeah, let's leave it at that. 209

209

You can always change it if you feel like it. 210

210

And now we need the same thing 211

211

for the error, we'll just call this error. 212

212

And then here we will use red background color. 213

213

So again, just pick some random color. 214

214

And then here some nice red. 215

215

Alright, and then some transparency. 216

216

And just to see how this looks like. 217

217

Or we can actually put the same box below 218

218

as we will need it later actually. 219

219

So this could be like, oops. 220

220

"Something went wrong. 221

221

"Please try again." 222

222

So let's take a look at that one. 223

223

It looks nice actually 224

224

but the text here should be a littler darker. 225

225

Actually in both of them. 226

226

Let's just add color 333, 227

227

this is a very gray text. 228

228

Usually this is the most dark text that I ever use. 229

229

Usually never go darker than this one. 230

230

Yeah, it looks better now. 231

231

So now let's just hide one of these one 232

232

and then we can change the height of this entire row here 233

233

so that the contact form fits the height of this again. 234

234

So I'll now comment this code here 235

235

'cause we don't want to see it for now. 236

236

And now we can go here to which would be the map box 237

237

but I'm not sure. 238

238

Yeah, it's the map box. 239

239

So I will change the height of it. 240

240

Let's say to 600 pixels. 241

241

And then again I will have to change all of these. 242

242

But we already see that it's not high enough. 243

243

So let's change it to 650 pixels, alright. 244

244

And, yeah it looks better now. 245

245

So let's now increase the map 246

246

to 650 pixels 247

247

as well as the form box to 650 pixels as well. 248

248

Now it looks better. 249

249

Now let's just for a second look at what's happening here. 250

250

And probably we should just put this message here 251

251

into its own row 252

252

such as we did with each of these elements here. 253

253

So we have a row for this, for this, for this, 254

254

and we will now use a row for this one 255

255

and this will hopefully solve this problem. 256

256

This, yeah, of course. 257

257

It should of course not be in this row 258

258

but instead it should have its own row. 259

259

And of course this one goes also here. 260

260

And here we go, it looks much better. 261

261

And now we have this weird space here. 262

262

I think it would be best 263

263

if we actually increased the margin 264

264

of this message box here. 265

265

So, let's say to 30 pixels 266

266

and this was probably a little bit too much. 267

267

I will increase it just 20 pixels 268

268

and then take another look at it. 269

269

Yeah, so now it's better. 270

270

Now the next step will be to show these two boxes 271

271

according to the success or the error 272

272

of the mailer.php script. 273

273

So if you remember in here 274

274

we passed this code. 275

275

This is a variable called success 276

276

and we define it as minus one if there's an error 277

277

and as one if there is success. 278

278

Now what we got to do is to include PHP 279

279

right into our HTML file 280

280

and then work with PHP here 281

281

and how do we do this? 282

282

We just write like this, 283

283

PHP and then here we close it. 284

284

And brackets doesn't like this 285

285

and it's actually right 286

286

because now what we have to do 287

287

is to save this as a PHP file. 288

288

So as long as you have a piece of PHP 289

289

inside of your HTML document 290

290

we need to call it a PHP file. 291

291

Alright, so the rest of this is still HTML of course 292

292

but now we have a little piece of PHP here. 293

293

So now these comments are no longer valid 294

294

because these are HTML comments 295

295

and not PHP comments. 296

296

Alright, so what do we do here? 297

297

We say that if the success is one 298

298

then we want this message here to show 299

299

and if the success is minus one 300

300

we want this message to show. 301

301

So how do we do that? 302

302

We just write 303

303

"If 304

304

get 305

305

success is one." 306

306

so again, I will not worry here 307

307

about syntax things 308

308

because that is not my goal with this course for you. 309

309

Alright, so I will just show you how to do this. 310

310

And to display packs with PHP we used the echo function 311

311

and now inside of this echo we will put all of this text. 312

312

And all of this text needs to be in quotes 313

313

and then a semicolon after it. 314

314

Since we also have to quotes here 315

315

we have to escape it, 316

316

this is how it calls in PHP, 317

317

and for that we use this slash. 318

318

So this way PHP doesn't interpret it as a real quote. 319

319

So if the success is one 320

320

then this HTML line will be outputted by the code. 321

321

And now we just have to do the same thing 322

322

for the minus one part. 323

323

So if it's minus one 324

324

then we want this text. 325

325

And here we need to change to error 326

326

from a code nicely. 327

327

And yeah, that should be it probably. 328

328

So I will now upload this 329

329

with this extension that I showed you before 330

330

and now we just need to wait a little bit. 331

331

Alright, here we go, 332

332

and now I'm ready to open it. 333

333

Here we go. 334

334

So now it's time to test the thing. 335

335

So something is wrong here 336

336

and there's actually a good reason for it. 337

337

Because what we want to do now, 338

338

what we want to open here, 339

339

is the index.php file. 340

340

The problem here is that they are both .php 341

341

and the .html file on the server 342

342

so now we would need to go ahead 343

343

and delete the old .html file 344

344

and then everything will just work fine. 345

345

I will not do that now. 346

346

I will just open it like this 347

347

so I directly opened the index.php file 348

348

that I want. 349

349

And everything looks the same of course 350

350

but now down here it looks great. 351

351

So this bug that you had before is now no longer here. 352

352

So that's just try this out. 353

353

So here just some random email 354

354

and, "Hey test." 355

355

And now there is actually some bug in the code 356

356

as we can obviously see. 357

357

So nothing's happening. 358

358

So I will just go back and check my, 359

359

I'm sorry, and check my PHP file 360

360

and yeah, what I immediately see that here 361

361

is the semicolon missing. 362

362

So now I will just load this again, and here we go. 363

363

So let's test the thing now 364

364

and hopefully everything will work just fine right now. 365

365

So, "Hey test message." 366

366

Alright, so this message got sent. 367

367

So no error here and everything worked as expected. 368

368

So down here we have our email. 369

369

So name Jonas, email testedtest 370

370

and message, hey test message. 371

371

This is exactly the text that we put here 372

372

in our script. 373

373

You see the subject is new contact from name, 374

374

which is Jonas, and then we have 375

375

the name, the email, the message 376

376

exactly as we have here in the script. 377

377

So, I hope you can make this work for you now. 378

378

I know that this was an important part 379

379

for many of you 380

380

so you had a great website and a good looking form 381

381

but it didn't work, 382

382

and now you can make it work. 383

383

So if you have any questions about that 384

384

or if anything doesn't work or, I don't know, 385

385

if you face some kind of problem 386

386

please just let me know in the comments 387

387

and post in the discussion 388

388

and I will try to help you as always. 389

389

And I hope you like this bonus lecture 390

390

and see you in the course forum.