Basic Website Tutorial

[Joss]

(Thought I should put a direct link to this on this forum - somehow I forgot to!)

This tutorial is aimed at anyone starting out with ProcessWire (whatever their level of expertise)  who wants to get a good but basic understanding of how the system works..

It goes back to the beginning and looks at creating fields, template files, templates and then demonstrates how those elements are put together very simply with very ordinary HTML/CSS and a few very simple bits of PHP.

This is not a definitive way of creating a site (ProcessWire has no set methods and allows you to work they way you wish), but it should answer some basic questions and get you going.

http://wiki.processwire.com/index.php/Basic_Website_Tutorial

Note: This tutorial also forms the basis of other tutorials such as the Simple News System and Simple Gallery System.

[MarcC]

Nice job. Thanks man.

[isellsoap]

Really cool, thanks!

[Beluga]

Hi there, Joss and thanks for recommending PW on the SEBLOD forums

One small correction to the tutorial:

In the section Creating the Article Fields, you create a field named article_metadescription, yet later on you use article_meta_keywords so the first mention should be changed to reflect the later ones.

[Joss]

Ah, thanks

That was because I originally had fields for both keywords and description, but decided to drop keywords since they are not often used now.

Oh, and welcome to PW! Hope you get to like it as much as I have. 

You will see Matthew Scheneker on here too, who used Seblod and Joomla more than I did, so if you have any questions relating one to the other, ask away.

Mind you, everyone else will probably join in anyway (they do that a lot round here)

Joss

[Beluga]

Yes I noticed Matthew as I was lurking around on the forums for a while. Btw. copying the code snippets from the wiki give extra line breaks for every line.. maybe they could be changed to one of those where you can just click "Copy code" and it puts it to your clipboard neatly.

Edit: ah-ha, I noticed the line breaks only appear with code snippets that have line numbers. The snippets in this copy without extra breaks: http://wiki.processwire.com/index.php/Simple_News_System

[Joss]

I dont seem to have trouble copying from Chrome to Textpad

[Beluga]

I was using Firefox. Chrome is ok for me. IE10 also has the extra break problem.

[Joss]

Oh, I give up trying to keep the world of browsers pointing in the same direction!

[Beluga]

Oh, I give up trying to keep the world of browsers pointing in the same direction!

The extension used is this, right: http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi

Strangely, the example snippet on that page with line numbers pastes fine from Firefox, yet still gives extra breaks from IE..

[Joss]

Yep, that is the extension

[Timbo]

Hey, I just did the Basic Website Tutorial and got stuck when i was trying to view the "Site Settings" page which is using the "Site-Settings-Template". Thats probably because the Site-Settings-Template has no file.

(Pages using this template are not viewable because the template file (Site-Settings-Template.php) does not exist [no-file].)

So what could I do to view the page, and where is the mistake?

Thanks

[Joss]

The site settings is just for use in the admin, not to be viewed on the front end, which is why it has no file. It is just one way of collecting together some global bits and pieces which you can then use in any template file in the site. Like the site title, for instance.

[Timbo]

Oh ok now I'm understanding the Sense of this Site, thanks

[Joss]

Be aware that this is just one way of doing things (and possibly not the best way), just used as a simple example to demonstrate a bit of PW functionality - but it may not be the way you want to lay out and structure your own websites.

There is no fixed way of doing this in ProcessWire.

[bwakad]

Hi Joss,

That's a good tutorial  - did not think these modules and about updating JQuery.

Concerning the JQuery, since it is now - either 2.1.0 or 1.11.0, some of us have this code in a file somewhere:

    <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery-1.4.2.min.js"></script>

I understand the tutorial it is meant for starters that should at least know a little about these things, so perhaps you add it, or leave it. It's your tutorial.

One time on a website I noticed code to automatically include this JQuery script whatever the name of it was, but I can't recall how the code was.

Was nice to learn the difference between $page versus $pages, and especially the statement ("headline|title").

Really nice job!

[knyaz]

i'm just starting and this is already helping a lot, good job and you have my thanks, its not like you have my axe but still ok

[Joss]

Oh, I have several of my own.

[bwakad]

I tried to replicate the tutorial for practise and noticed In the part for TUT_article:

You suddenly split the field article_images into article_mainimage and article_secondimage....

And article_metadescription became article_meta_keywords....

Or is the part from before the (where you created those fields) not correct?

I also don't think this should work in the tut_header.inc

<meta name="description" content="<?=$pages->get("/site-settings/")->site_meta_description ?>, <?=$page->article_metadescription ?>">

[Joss]

Ah, that is an old screenshot - the tutorial got edited a long time ago to remove meta keywords (bit superfluous really) and change the way the images work, but the screenshot hasn't been changed.

Why don't you think the meta description will work?

[bwakad]

yeah, I changed that too, just like the question mark I had to add for the first image <?=?page

But to tell you the thruth, it's a good practise to do anyway.

And by the way - I took your advise to start from scratch with a normal installation without site profile and are hoping everything works (later on).

[Joss]

which question mark?

[bwakad]

the one I forgot in here, :

<img src="<?=$page->article_images->first()->url ?>">

[PhotoWebMax]

I just did this tutorial: nice job!

Couple of things:

1) During the time it took to complete the tutorial I found I was logged out of the admin (several times) unexpectedly?

2) When I viewed the test article page from the front end there was a server error message and no content from the template fields?

I removed the two instances of image code from TUT_article.php and the page rendered fine with the text fields generated correctly. Adding the image code lines back returns the error statement.

I am unclear how the article_images field works here? Where does the article_mainimage and article_secondimage come from? 

Here is the code from TUT_article.php

<?php include("./TUT_header.inc"); ?>
 
<div id="article-container">
	<div class="article-row">
		<div class="article-mainimage">
			<img src="<?=$page->article_images->first()->url ?>">
		</div>
		<div class="article-introbox">
			<h2><?=$page->get("headline|title") ?></h2>
			<div class="article-introtext">
				<?=$page->article_introtext ?>
			</div>
		</div>
	</div>
	<div class="article-row">
		<div class="article-main">
			<img src="<?=$page->article_images->last()->url ?>">
			<?=$page->article_maintext ?>			
		</div>
	</div>
</div>
 
<?php include("./TUT_footer.inc"); ?>

I would like to get this sorted in my head before moving on...

Thanks!

[PhotoWebMax]

One other thing:

I tried deleting a template field from the Fields pane but when you hit the delete button you get a message saying you cant delete this field because it is be used by a template? How do you delete a a field if you really want to?

EDIT: I guess you have to do this from the Template pane rather than the Field pane itself?