Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Thursday, August 25, 2016

PHP for Server Emails



Last week I launched my first "Mobile First" website using Bootstrap3 at <Kai-PDQ.in>. And today I found myself diving deeper into the alphabet soup.

After I launched the website, I realised that there was one functionality that was beyond the magical powers of Bootstrap3: Email Forms that actually sent out emails.

Inside the Bootstrap3 framework, the responsive "containers" could help you create an entire website that would work across mobiles, smartphones, tabs and PCs, but to make them send emails you needed something more: PHP.

PHP is supposed to be the acronym for Hypertext Preprocessor (how is that?). It is apparently a super-popular script executed on the servers which lies at the heart of blogging sites like WorldPress, It is also used extensively by the social media behemoth with more than 1.5 billion users - FaceBook.

So how do you write a PHP script that enables forms on your website to send emails to your Yahoo or Gmail accounts?

As in the case of Bootstrap3, its best to start with a YouTube video tutorial. This is the one that worked for me:

TeachMeComputer: PHP for Beginners - https://www.youtube.com/watch?v=kY5P9sZqFas

Once you get a hang of the basics, its best to dive right in with the code for a basic email form, as described in this video by MushroomHeadBangers - https://www.youtube.com/watch?v=yW5cgqf6cNo

 Then, to install a web server on your PC, you need XAMPP. This tool comes as a package with Apache, MySQL and PHP. Once you have all these things in place, you are ready to go.

One thing none of these video's tell you (perhaps its common knowledge?), is that your web-host needs to have a PHP enabled portal. It is also not clear from the videos how we can go about with the trouble shooting.

My site takes in the feedback form, returns the "Click Here to Go Back" page, and I do get an email in my Yahoo account. However, for some reason, the mails land up in the Spam-box even if they are marked safe. Also, the message is coming in blank with the just the sender's email id.

Some progress...but I guess there is still a long way to go!

-----------------------
LINKS - Responsive Forms

  • PHP Download - http://php.net/downloads.php
  • W3School Tutorial - http://www.w3schools.com/php/php_intro.asp
  • XAMPP - PHP development environment - https://www.apachefriends.org/index.html
  • https://www.formget.com/how-to-make-simple-responsive-form-for-a-website/

Friday, August 19, 2016

In Praise of Bootstrap3


In the world of web-design I am a bit like Rip van Winkle - a solitary rustic who once dabbled in ancient HTML; the oldie who goes off to sleep for 15 years and then wakes up to discover a digital world that has been completely transformed.

Nothing remained of the familiar landscape. Old HTML had become too primitive, too cumbersome and simply incapable of showing up on anything other than a clunky old PC. As webpage designing had moved from one version of HTML to another, the newer versions had teamed up with CSS and outsourced all the layout grunt work, Java and JScript had come in to add heft and magic to the amazing things that could be accomplished using smartphones, tablets, and laptops. A bewildering new world that would not reveal itself in "view page source".

It is while wandering through this maze that I stumbled upon the answer to all my problems - Bootstrap3. It was built on whatever little I knew of HTML and CSS, and then, with a few online stylesheets helped me create websites that worked beautifully across platforms and devices. Magic!

Here are links to the sites that were a big help:

* GetBootstrap (Currently at v.3.3.7) - Home - http://getbootstrap.com/
Repository of all the latest download files, Content Delivery Networks (CDNs) and sample pages

* YouTube - Lalit Bassi's Bootstrap3 Tutorial (1:40 hrs) - https://www.youtube.com/watch?v=gqOEoUR5RHg
Even after downloading Bootstrap, I was quite lost until I stumbled upon this much-viewed tutorial. Starting with a simple HTML layout, this video takes you through a wide range of functionalities that can help you launch a fully functional website is a few hours. It also introduced me to the joys of using SublimeText - an editor infinitely better than MS-Text!
Caveat: The Dilliwala Yankee accent can be tough...but remember: no pain, no gain! ;)

* YouTube - Bucky Robert's TheNewsBoston (14 short clips)- https://www.youtube.com/watch?v=qIULMnbH2-o
Unlike Bassi's package this one tells you about various different tools in short, easy-to-understand videos.

* YouTube - Bootstrap tutorial by Derek Banas (1:04 hrs) - https://www.youtube.com/watch?v=gqOEoUR5RHg
More like a catalogue presentation of the various things you can do with Bootstrap3. Derek keeps adding and deleting code so you might be disappointed to find many components missing in his final "cheat-sheet".

----------------------------------------
LINKS & REFERENCES

* Bootstrap - https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
* Tutorial Sites
  • W3Schools - http://www.w3schools.com/bootstrap/

* DevelopMentor YouTube - Easygoing pace but the guy seems unsure of many functionalities - https://www.youtube.com/watch?v=ZGotwBWGL7A&spfreload=5