1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Need help in PHP

Discussion in 'Web Development' started by Alyssa Ahlaine Dellosa, Oct 11, 2014.

  1. Alyssa Ahlaine Dellosa

    Alyssa Ahlaine Dellosa New Member

    Hi. I was actually new to PHP but I do know some basic of HTML and CSS. So, I was having a problem in making a website, I do have a template which is in PSD file. I really have no idea on how to use it.

    I'm trying to call the PSD file but a broken image appeared to me, here is the code I used to start:

    <html>
    <head>
    <title>php Test</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>

    <?php
    echo '<p>Hello World</p>';
    $image_name = '/Templates/Browse.psd';
    $image_url = 'C:\xampp\htdocs\mywork\Templates';
    ?>
    <a href='<?php echo $image_url; ?>' border='0'><img src='<?php echo $image_name; ?>'></a>
    </body>
    </html>

    Sorry, I really don't know where to start. :(
     
    Alyssa Ahlaine Dellosa, Oct 11, 2014
    #1
  2. Recidivist

    Recidivist VIP Member

    Ok, so this is not how templates work. You have a PSD, which is a PhotoShop Design file. This is the source file for a template design made in PhotoShop. This is only for use in PhotoShop (or other image editors than can open PSDs). This is not a website and will not display as an image.

    Other than that, your code is technically valid code, but the PSD is not what you think it is. This PSD is purely for designing the template (and perhaps slicing it up for later use). The PSD is not used in the creation of the website.

    You need to download the HTML, CSS and image files for the template you want. These are usually included in a .zip archive file, which you will extract into your XAMPP working directory. This will usually include a series of .html files, one or more .css files and multiple images (.gif, .jpg, .png, etc).

    For example, if you take the first tempalte offered by FreeWebsiteTemplates.

    This is what it looks like.
    https://freewebsitetemplates.com/preview/hairstylesalon/index.html


    This is the download.
    https://freewebsitetemplates.com/download/hairstylesalon/

    This download contains a .zip file which you need to extract into your working directory. This has the PSD and all of the HTML, CSS and images that you need. You do not need that PSD unless you want to make changes to the pre-existing image, slice them and replace the old image.


    You do not need to code anything for this template to work. Simply visit your working URL for the XAMPP server (probably http://localhost:8000/index.html) and it will look just as it did in the preview.
     
    Last edited: Oct 11, 2014
    Recidivist, Oct 11, 2014
    #2
  3. Alyssa Ahlaine Dellosa

    Alyssa Ahlaine Dellosa New Member

    Thank you! I followed your instructions and it worked! :D So now I understand that there should be different files for each module. :X3: Correct me if I am wrong, but all the codes is just HTML and CSS right? So if it is this beautiful already, what is the use of PHP? :confused:
     
    Alyssa Ahlaine Dellosa, Oct 12, 2014
    #3
  4. Recidivist

    Recidivist VIP Member

    Edit: Only just noticed how long this was. The short answer is: HTML is like the inside of your body, it give bones for structure (<div>, <section>) and all your innards for some content (<p>, <img>). CSS is like your skin, your appearance - how it looks from the outside. PHP is like an almighty God that decides exactly how your bones and innards form - whether you get four kidneys or one, a tail or not - you can't see it, but it decides what you get.

    Original:
    HTML and CSS are "front-end" languages - when your website is available on the interenet, whenver someone visits your website they will actually download the HTML and CSS files on to their local machine which will then render them (make them visible in the web browser). PHP is a "back-end" language, meaning when the user visits your web site they will not download any of your PHP code. When the user visits your web site and the page contains PHP, your web server will compute the PHP and only serve (give) the HTML and CSS.

    For example, take a look at a little bit of HTML/PHP.


    HTML:
    <html>
<body>

<?php
echo '<p>Hello World</p>';
$image = '../some/image/location.jpg';
?>

<img src='<?php echo $image; ?>'></a>

</body>
</html>
    This is how the file would look on your web server. However, when you actually visit this page in your web browser, which downloads the file to your local machine, you do not recieve the exact same thing.

    What you actually recieve is this:


    HTML:
    <html>
<body>

<p>Hello World</p>
<img src='../some/image/location.jpg'></a>

</body>
</html>
    This might look pretty trivial and pointless from this example, but PHP allows for you to dynamically generate content on your page as the user requests it.

    So imagine a blog, or even this forum. This forum would not be possible without PHP (or RoR, ASP.net, etc - these are other languages that do exactly the same as PHP). When I post this reply, the text is saved into a database, NOT into a web page. So actually, the page that contains our little conversaion here does not really exist as a page. There is no page on the www.freewebsitetemplates.com web server that contains our conversation. However, there is a page that retrieves our conversation from the database, and generates a page containing it. What that means is, whenever you visist the url for this thread, the page you are visiting actually looks like this:

    PHP:
    <?php
    get_header    (): // A function that gets a php or html file that contains the HTML code for the header
    posts = get_posts(); // A function that gets all of the posts for this thread from the data base, and stores it in "posts".

    for(post in posts): // For every post in this thread
    ?>

    <div class="post"> // Make a post div
        <p><?php echo $post->post_text; ?></p> // Put the text of the post inside the paragraph
    </div>

    <?php endfor ?>
    So you might not get this right away, but it's actually relatively simple when you do! There are now three posts in this thread. So when we ask the database for the posts for this thread, we get a list of three posts which contains the post text. In the PHP we say "for every post that is in this thread" which is quite self-explanatory, right? We have a list of three posts, so for every post in the list "do something". Which in this example means "do something three times". What do we do three times? Well, we generate some HTML, just as you would in a normal HTML file. So, for the first post we create a div with the calss post. Then we create a paragraph and we insert some more PHP to get the post text (I won't go into the specifics of that line, just know that it gets the post text). We still have two more posts, so we do it two more times, and each time the line that adds the text adds the text for each post.

    Now, that doesn't look very useful to the user, but when they request that page by visiting this thread (our conversation), what they actually get is this:

    PHP:
    <div class="header">
        <    img src="fwt/logo.png" />
    </    div>

    <    div class="post"> // Make a post div
            <p>Hi. I was actually new to PHP but I do know some basic of HTML and CSS. So, I was having a problem in making a website, I do have a template which is in PSD file. I really have no idea on how to use it.</p>// Put the text of the post inside the paragraph
    </div>

    <    div class="post"> // Make a post div
            <p>Ok, so this is not how templates work. You have a PSD, which is a PhotoShop Design file. This is the source file for a template design made in PhotoShop. </p>// Put the text of the post inside the paragraph
    </div>

    <    div class="post"> // Make a post div
            <p>Thank you! I followed your instructions and it worked! :D So now I understand that there should be different files for each module </p>// Put the text of the post inside the paragraph
    </div>
     
    Last edited: Oct 12, 2014
    Recidivist, Oct 12, 2014
    #4