Copy link to clipboard
Copied
Hi everyone,
Very many thanks to all who have helped me so far it is very much appreciated. I am trying to put together my own web page using Dreamweaver and have been following a number of tutorials.
I am now stuck on my contact page and in particular the php area (i think)....
I have followed a tutorial by Nancy_O from this community but I think / know I have done something wrong. Would someone be able to look at my site and identify where I have made a boo boo please?
Again many thanks for taking the time to look at this for me, if I could I would get you a beer!
All the best
John
The way I would check on PHP availability would be to make a file, name it info.php and put in it:
<?php
phpinfo();
?>
This will not just tell you that PHP is installed, but also provides a lot of other useful information. For instance, if PHP version 7 is installed, then you need to write code for that version. Some code written for PHP5 would break on PHP7.
Copy link to clipboard
Copied
What are you stuck on?
At the minute you have an .html extension on the contact page - contact.html which presumably will include php coding? Well thats not going to work. To parse server side code you need the page to have a .php extension.
However that's not going to work locally unless you have a local server environment set up, so you would have to test the page remotely, assuming your host server supports php.
Does that make any sense?
So when you hit the submit button you wont see anything happen at the moment as the php code (assuming there is some at the top of the page) cannot be parsed by the browser.
Copy link to clipboard
Copied
Hi Osgood
It would appear I am getting stuck on everything , thanks for looking at it for me.
I thought I had created a .php page with HTML and php code.
I have no no idea if my server host allows php, that I will check up on. What would be the alternative to php?
As soon as I find out I'll let you know.
Regards
John
Copy link to clipboard
Copied
jmacphot1975 wrote
I have no no idea if my server host allows php, that I will check up on. What would be the alternative to php?
Insert the below bit of code in a DW page and save it as hello_world.php, upload the file to your server and browser out to it. If you see 'Hello World' youre in business.
<?php
echo "Hello World";
?>
Copy link to clipboard
Copied
I have edited the title of your post to make it more comprehensible to other contributors and visitors. Feel free to retitle the post if I did not capture the essence of your question correctly.
Thanks,
Preran
Copy link to clipboard
Copied
The way I would check on PHP availability would be to make a file, name it info.php and put in it:
<?php
phpinfo();
?>
This will not just tell you that PHP is installed, but also provides a lot of other useful information. For instance, if PHP version 7 is installed, then you need to write code for that version. Some code written for PHP5 would break on PHP7.
Copy link to clipboard
Copied
Hi Rob
I have attached the result:
Does this mean the server i am using supports php?
Many thanks
John
Copy link to clipboard
Copied
Yes, you have PHP version 5.6.29.
Nancy
Copy link to clipboard
Copied
Thanks Nancy!
Here is the code from the newly named contact.php:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrap">
<header class="header">
John MacKinnon Photography
</header>
<nav class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
<div class="main1">
<p class="above-phots">How do you get in touch</p><br>
<p class="contact-info">Please use the contact form below if you would like a competative quote any photographic work I might be able to help with If I am unable to assist I may be able to point you in the right direction of someone who can.</p>
<div class="contact">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-md-8 center-block">
<p class="required small">* = Required fields</p>
<!--begin HTML Form-->
<form class="form-horizontal" role="form" method="post" action=" ">
<div class="form-group">
<label for="name" class="col-sm-3 control-label"><span class="required">*</span> Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label"><span class="required">*</span> Email: </label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="you@domain.com">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-3 control-label">Phone: </label>
<div class="col-sm-9">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890">
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-3 control-label"><span class="required">*</span> Message:</label>
<div class="col-sm-9">
<textarea class="form-control" row="4" name="message" placeholder="Tell us your story?"></textarea>
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-3 control-label"><span class="required">*</span> Human Test:</label>
<div class="col-sm-4">
<h3 class="human">6 + 6 = ?</h3>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6 col-sm-offset-3">
<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>
</div>
</div>
<!--end Form--></form>
<!--end col block--></div>
<!--end col--></div>
<!--end row--></div>
<!--end container--></div>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</div>
</div>
<div class="footer">
<p class="copyright_text">© copyright 2017 <a href="http://www.jmacphot.com">JMacPhot.com</a>.<br>Designed and Developed by John MacKinnon</p>
<ul class="social">
<li><a href="https://twitter.com/John_MacKinnon5">Twitter.</a></li>
<li><a href="#">Facebook.</a></li>
<li><a href="https://uk.linkedin.com/in/john-mackinnon-04318470">Linkedin.</a></li>
<li><a href="https://500px.com/johnmackinnon">500px.</a></li>
</ul>
</div>
</div>
</body>
</html>
John
Copy link to clipboard
Copied
OK. I see 2 glaring problems.
#1 there is absolutely no PHP code in your contact page
#2 there is no link to Bootstrap CSS in the <head> of your HTML.
So your form is unstyled and your processing script does not exist.
Go through all 3 parts of the tutorial again. Pay particular attention to Parts 2 & 3 which discuss the PHP script, variables and error reporting.
Nancy
Copy link to clipboard
Copied
To use the contact form and processing script from my tutorial at Alt-Web Design & Publishing: Responsive Contact Form with Bootstrap 3.2 and PHP (Part 1) you need 3 things:
1. a web server running PHP 5.3 or higher AND
2. the PHP mail () function AND
3. a valid contact page named with a .php extension. Example: contact.php
Your contact page contains validation errors. No action value is appearing in the form. It's improperly named with .html extension.
Showing results for http://www.jmacphot.com/contact.html - Nu Html Checker
If you care to copy & paste the code from your contact page into a web forum reply, I'll take a look at it.
Nancy
Copy link to clipboard
Copied
Hi Nancy
I have gone back through it all again and guess what..it works!! woop woop. I have even managed to send myself a test email to the webmail account I set up.
What would be the best way for me to enter that code into a page so it keeps my headers / footers so all my pages have them look?
Many thanks for your help as always.
Kind regards
John
Copy link to clipboard
Copied
jmacphot1975 wrote
What would be the best way for me to enter that code into a page so it keeps my headers / footers so all my pages have them look?
Use Server-side includes. It's easy peasy with .php files.
Nancy
Copy link to clipboard
Copied
Here's a good, quick tutorial on php includes...
Copy link to clipboard
Copied
Copy link to clipboard
Copied
What are you putting inside your Include file? It should be nothing more than a snippet of relevant code for the header or footer. No doctype, no <html> tags, no scripts or CSS, etc... Just the relevant code for that small section of your document.
Nancy
Copy link to clipboard
Copied
I have made a folder named includes, in there i have saved the contact.php.
I have then placed this within my document also named contact.php:
<?php include("includes/contact.php"); ?>
:-S
Copy link to clipboard
Copied
Not a good move.
Contact.php is a complete document with <html> <head> <style> <script> and <body> tags. It's never going to work as an include inside another complete document. So you need to decide just how you want to carve this up.
See link below for includes used as sitewide navigation menu.
Alt-Web Design & Publishing: Server-Side Includes with PHP
You can do the same with your sitewide footer.
Nancy
Copy link to clipboard
Copied
I have chopped up the pages to the best of my ability and it appears to be working very well - thank you for making me aware of this and I can see the benefits or working this way (time saving).
I am now going to try and titivate, if any of you fine people have any suggestions they are very welcome - delete the site and start again is not an option though!
Thanks again!!
Copy link to clipboard
Copied
Hi John,
It should be immediately clear to the website visitor what the point of the website is.
If the point of the website is to get freelance photography business, then you should make that clear at the top of the home page, not in small text at the bottom. State what kind of photographic services you offer. For instance, do you have a studio where you can do product photography for advertising?
But maybe your site is primarily intended to share with other photography enthusiasts. It kind of looks that way because only other photographers would have an interest in what camera and lens was used for the shots.Someone looking for a wedding photographer doesn't give a fig what camera is used.
If you are trying to get photography work, I suggest putting just two or three photos on the home page. Choose photos that tell a story and leave the viewer wanting to know what's going on.
Copy link to clipboard
Copied
Hi Rob
Many thanks for this useful advice. As I am sure you can see I am newer than a newbie to web design.
The future aim of this site will be to promote as a small photographic business which will include my (trying) get a portfolio / Gallery for show. I will also then need to find a way to give customers access to their images online securely.
I am changing the site daily (between my day job) to try and improve it and welcome all advice / guidance.
Again many thanks.
Regards
John
Copy link to clipboard
Copied
Remove height from main-info CSS. Explicit height values restrict container size and cause usability issues. Your main-info is colliding with your footer.
Link to CONTACT is still pointing to old HTML page. You should change that to contact.php
You should switch to a responsive layout. More people use tablets/mobile devices on the web now than laptops.
Nancy
Copy link to clipboard
Copied
2mb image?
http://www.jmacphot.com/images/image1.jpg
12mb image is insane:
http://www.jmacphot.com/images/image5.jpg
I know you're a photographer so quite rightly would be extra careful about image quality but you need to optimise your images for web browsing.
Copy link to clipboard
Copied
In addition to what Osgood said your home page is scoring 0/100 on Google Page Speed Insights. Read through the reported recommendations to improve your site's performance. On the web, optimizing file size is critical to a good user experience.
Nancy
Copy link to clipboard
Copied
On a positive note though my server did respond quickly.....