How to put HTML into PHP scripts?

Kinoko · Fri 04/01/2008 04:01:29

I've recently decided to finally create a webcomic page and I spent all of last night going from:

- What the fuck is a PHP and an SQL? A program?? A language?? An animal??? WHY CAN'T SOMEONE EXPLAIN THIS TO ME?!?

to a much more composed:

- I have created a MySQL on my host, uploaded a pre-written PHP script and created a more-or-less functional webcomic.

So, now my goal is to modify the Comic Shout template to my suitings.

What I'm hoping is that I can basically create a HTML page (I'm comfortable with HTML) around the PHP code... but I've been trying and I really can't figure out whether I should be modifying index.php or the template's index.php os the css or... what!

So I was wondering if anyone could point me in the right direction. I'm using Dreamweaver 8 and I just cannot figure out how to get started. The Comic Shout forums aren't terribly populated and I can't find any "How to"s that really help me.

Ponch · Fri 04/01/2008 04:49:25

It's been a while since I played around with Dreamweaver, but doesn't it have an interpret command just for php? At any rate, you can embed php into html fairly easily.

This site helped me in the past. Maybe you can find something you can use there.

Hope that helps.

- Ponch

monkey0506 · Fri 04/01/2008 05:42:06

Well I can't speak for Dreamweaver, but I know a little bit about PHP. First off, it's a completely redundant acronym seeing as it literally stands for PHP: Hypertext Protocol. Not that it's particularly relevant to anything, I just find it strange to have a recursive acronym.

Moving on. PHP is what's called a server-side scripting language. Let's break this down into two parts: server-side and scripting language. Clearly you know what a scripting language is, so we can just focus on server-side. server-side means that this particular scripting language is executed by the server. That is, when you point your browser to a PHP file (say, http://www.comicshout/index.php), the server that page is stored on must interpret the scripting language, and dynamically build the HTML (or images or any of several other supported file types; though the most common use is generating HTML) that will be output.

PHP is designed such that it can be directly integrated into your HTML pages. For example if you do a simple Hello World PHP script, it would look like this:

Code: ags

<?php
  echo "Hello World";
?>

Then if you point your browser to that file, you would see the output:

Hello World

However, if you look at the source of the page (Ctrl+U in Firefox) you would find that this isn't in fact HTML, it's just plain text!

Code: ags

Hello World

So, if you want to make sure that you're using HTML, right? Let's set up our HTML skeleton:

Code: ags

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Hello World PHP script</title>
  </head>
  <body>
  </body>
</html>

Now, to implement some PHP into this. Remember how I said PHP could be integrated straight into the HTML? One of the best things about PHP is you can jump straight from HTML to PHP and back again, just about anywhere:

Code: ags

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Hello World PHP script</title>
  </head>
  <body>
  <?php
    echo "Hello World";
  ?>
  </body>
</html>

Now if we point our browser to the page, we'll see the same output but if we look at the source:

Code: ags

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Hello World PHP script</title>
  </head>
  <body>
Hello World
  </body>
</html>

You can also use variables from PHP in your HTML like this:

Code: ags

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
  $font_size = 5; // set our font size
  ?>
<html>
  <head>
    <title>Hello World PHP script</title>
  </head>
  <body>
    <font size = "<?php echo $font_size; ?>"><?php echo "Hello World"; ?></font>
  </body>
</html>

I've told the PHP to output the $font_size variable into the font tag's size parameter, and then put the "Hello World" text into the tag. This can make it easy to quickly redefine the size of several items at once. The HTML source would look like this:

Code: ags

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Hello World PHP script</title>
  </head>
  <body>
    <font size = "5">Hello World</font>
  </body>
</html>

For more on using PHP, I suggest going through the official PHP tutorial (over at php.net), and also googling 'PHP tutorial'.

As for MySQL, that is what we like to call a database management system. That is, it's a set of software designed specifically for managing a database. Take for example the AGS forums. The forums has a record of all the users (names, signatures, avatars, post counts, etc.), posts, threads, etc. which is stored in a database. I can't say for sure that this site uses MySQL as there are other alternatives, but for the sake of example it's safe to assume this site uses MySQL.

Clearly a database as large as that of the AGS forums could become rather unwieldy. That's where MySQL steps in.

However, unless you really need to directly access this database, you don't really need to worry about knowing any MySQL syntax. Even if you did need to change something in the database, it would probably be easier and faster to use an automated script such as phpMyAdmin (a very powerful and easy-to-use MySQL management system that will handle all the MySQL from a simple UI) or phpminiadmin (a more light-weight alternative, though not as powerful or simple).

Hopefully this is enough to set you in the right direction, though if you have any more-specific questions (such as "what does this code do" or "should I edit this" or...whatever else you might have questions about), do feel free to ask and I, as I'm sure others too, will do what I can to help you out.

Kinoko · Fri 04/01/2008 07:54:05

Hey, thanks! That was extremely helpful!

Wow, seriously, extremely helpful.

I feel like I understand how to code around PHP now. My problem is still understanding where I should be placing certain lines of code though. Because I'm working from an already existing script, it's not so clear.

Basically, my site is here with the standard template: http://kinokofry.com/

The index.php looks like this:

Code: ags


<?php
require_once("includes/mysql.php");
require_once("includes/functions.php");
$header = getTheme("header");
$page = getTheme("index");
$footer = getTheme("footer");
if (file_exists($header)) {
    require_once("$header");
}
else {
}
require_once("$page");
if (file_exists($footer)) {
    require_once("$footer");
}
else {
}
?>

According to the creator of Comic Shout, I can just add an <img> tag into this somewhere to create a title graphic/banner thing, but I'll be damned if I can make it work.

So if I go into the individual theme's index.php, I get a much longer code which starts off like this:

Code: ags



<?php
//PLEASE SEE http://www.comicshout.com/forums for a list of what and how each function works.

//Include theme's header file. Must be inlcuded on all (page_name).php files.
include_once("header.php");
?>
    <div id="comic">
        <?php getComic(); ?>
    </div>
    <div class="nav_wrapper">
        <div class="nav_comic">
            <?php getNav("archives"); //shows the comic strip navigation contained in an unordered list with archives link, style the list as you please in css. ?>
        </div>
        <div class="nav_rss">
             <ul>
                <li><a href="<?php getSite("url"); ?>/feed.xml">Comic</a></li>
                <li><a href="<?php getSite("url"); ?>/newsfeed.xml">News</a></li>
                <li><a href="<?php getSite("url"); ?>/commentsfeed.xml">Comments</a></li>
            </ul>
        </div>
        <div class="clear">
        </div>
    </div>
    <div id="content_wrapper">
        <div id="column_left">
            <div id="side_news">
                <h2><a href="news.php">News</a></h2>
                <?php
                //getNews();
                //Gets your sites news items. Can be controlled with 5 parameters.
                //getNews(limit,format,length,date_format,mode);
                //Limit: controls how many results are returned and is specified in the format "#,#"
                    //example: getNew("0,5","","","",""); skips the 0 newest news items and returns 5.
                //Format:  can be set to "full" (to return the entire news item) or "partial" (to return a portion of the news item)
                //Length:  is used in conjuction with format. If format is set to "partial" length will control how many words are returned
                    //example: getNew("","partial","10","","");  will return the first 10 words of all news items with a link to the news item
                //Date_format: controls how the date is formatted. It uses the standard php date letters found at http://us.php.net/date
                    //example: "D M j Y" Sat Mar 10 2007
                //Mode: "all" or "single". Single will return just the news item in the requesting url (ie: news.php?news_id=2) if one exists.
                //WARNING: It's safest to specify paramenters you wish to leave at the default with "".
                    //example: getNews("","","","m.d.y","signle");
                    //example: getNews("1,10","partial","","F j, Y","");
                ?>
                <?php getNews("0,3","partial","12","F j, Y"); ?>
            </div>
            <div id="side_links">
            </div>
        </div>
        <div id="column_center">
            <div id="comments">
                <h2>Comments</h2>
                <?php
                //getComments();
                //Displays comments for the selected comment in an <ul> list with <h3> heading.
                //Can take two parameters. getComments(limit,date format
                //Limit: controls how many results are returned and is specified in the format "#,#"
                    //example: getComments("0,4",""); skips the 0 newest comments and returns 4.
                //Date_format: controls how the date is formatted. It uses the standard php date letters found at http://us.php.net/date
                    //example: getComments("","D. F j, Y") would return a date that looked like Sat. March 10, 2007
                ?>
                <?php getComments("", "F j, Y"); ?>
            </div>
            <div id="comments_form">
                <h2>Leave a Comment</h2>
                    <?php processComments(); //Always call this before commentForm(). Style in function <p class="commentMessage"></p>?>
                    <?php commentForm("superheroes","18","25"); //Displays the comments form for the current comic. Place wherever. First number control name input width, 2nd controls textarea width ?>
            </div>
        </div>
        <div id="column_right">
            <div id="side_archives">
                <h2><a href="archives.php">Archives</a></h2>
                <?php
                //getArchives();
                //Build links for your comics archives. Parameters (all optional) getArchives(style, format, limit, date_format);
                //Style: can be set to "list" or "select". List makes an <ul> list and select builds a dropdown box. List is default
                //Format: can be set to "date","title","short" or "both". Both is default. Short returns the first 12 characters of the title
                //Limit: controls how many results are returned and is specified in the format "#,#"
                    //example: "0,10" -skips the 0 newest comics and returns 10. Default is set to return all and skip none
                //Date_format: controls how the date is formatted. It uses the standard php date letters found at http://us.php.net/date
                    //example: "m.d.y" 03.10.01
                //WARNING: It's safest to specify paramenters you wish to leave at the default with "".
                    //example: getArchives("", "", "", "m.d.y");
                    //example: getArchives("select", "", "5,10", "");
                ?>
                <?php getArchives("select", "short", "", ""); ?>
                <h2>Last 10</h2>
                <?php getArchives("list", "both", "0,10", "M. j, y"); ?>
            </div>
            <div id="side_ads">
            </div>
        </div>
        <div class="clear">
        </div>
    </div>
<?php
//Include theme's footer file. Must be inlcuded on all (page_name).php files.
include_once("footer.php");
?>

Sorry, it's a little code heavy, this post. I mean, I honestly kinda understand how it's made up but I'm still not seeing what I'm after to make it clear to me where I should be placing code.

monkey0506 · Fri 04/01/2008 08:36:42

Well based upon that (without any further investigation into Comic Shout or their codes), I would say that you're expected to insert the <img> tag after the header inclusion (after the "file_exists($header)" branch), before the page inclusion (before the "require_once("$page");" line).

But if you want the image to appear at the top of every page, you would be better off putting the <img> tag into the header PHP file. Without seeing the "getTheme" function, I can't really be sure how exactly it resolves, but the file is probably called "header.php" or something similar. Regardless, the header PHP file is sending the following output:

Code: ags

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>
        KinokoFry   </title>
  <link rel="stylesheet" href="http://kinokofry.com/themes/Default V2/style.css" type="text/css" media="screen" />
  <link rel="alternate" type="application/rss+xml" title="Main RSS Feed" href="http://kinokofry.com/feed.xml" />
  <link rel="alternate" type="application/rss+xml" title="News RSS Feed" href="http://kinokofry.com/newsfeed.xml" />
  <link rel="alternate" type="application/rss+xml" title="Comments RSS Feed" href="http://kinokofry.com/commentsfeed.xml" /> 
</head>
<body>

Which is the beginning of the HTML page all the way through the body tag, where your content goes. So if you then wanted to add a banner image to every page on your site you would simply add the <img> tag after the <body> tag. Then it would be included into every page (via the PHP codes). If you can hunt down your header PHP file, then you should be able to include that banner.

Kinoko · Fri 04/01/2008 08:59:11

EDIT: *ahem* Got it working, thanks!! I can play with it from here ^_^ But I may bug you again if I run into some more problems.

monkey0506 · Fri 04/01/2008 17:03:15

What, might I ask, did you change? The only thing I could think of that you might have done wrong was modifying the wrong header.php file...but that seemed so obvious I was wary of insulting you by asking.

After looking a little bit more at the scripts you provided, I'm assuming that getTheme("header") simply resolves to something like CURRENT_THEME_DIR/header.php. In that case it should properly link to the header.php file you uploaded...

So...what was it that did the trick?

P.S. I love the Xbox comic btw.

Kinoko · Fri 04/01/2008 18:18:05

I've been working on this all night now. Slowly and steadily. But I'm in a good groove.

I changed the correct header.php and all, my original problem that I EDIT'd out was that I directed the <img> tag to the wrong name. Oops! Like a retard. But it was easily fixed so I was very happy.

Also, thanks! It's really nice to get some feedback on that ^_^

My actual art webpage up til now has been http://kinokofry.livejournal.com and I only ever get a few comments, if that.