A request for barebones basic Revolution Tutorials.

Hi

I have looked at the documentation etc etc BUT

It would be nice with a basic tutorial that guides one through the basics of Modx Revolution.

I just want someone to write down the steps they take to create a simple site. Barebones 10 step list of....

example

1.
Created my site in dreamweaver.

2.
Opened up the modx manager url....

3.
Went to template
left or was it right click icon that looks like ....
choose new template. Fill in name etc.

4.
You get the idea.

Just do it from memory. If you have done this a bunch of times already it should be a quickie to reply to this post with a mini barebones tutorial.


Could someone just write it and share it here? I will then expand on it the more I learn and create a fuller text tutorial and video tutorial. BUT I need the encouragment of the barebones 10 step tutorials.
A simple request.

Thanks!

Some of what you want is here: http://www.bobsguides.com/porting-your-site-to-modx.html

It is written for Evolution, but it should be pretty easy to figure out what you need to do in Revolution.

Ask if you get stuck on any of the steps.

I’m working on a series of beginner tutorials for MODx Revolution at http://codingpad.maryspad.com. These are targeted at the complete beginner, and I will soon be tackling working with templates. I’ve also done a similar series for MODx Evolution, which you can find listed at http://codingpad.maryspad.com/beginner-tutorials/

Hope you can find something useful there.

Thank you to the both of you!

This is not my first request for simple beginner tutorials and perhaps not my last, and not the first time both of you reply to my requests.
I have looked at your tutorial BobRay and it helped (got some questions but I’ll get back to that another time)!
I look forward to your tutorials on Revo Einsteinsboi!


I give everyone who has from a little to a lot of knowledge of modx Revo this challenge:
(Doing so just to get really short and to the point tutorials:)

Set the timer on for 5 minutes and quickly write a short, simple, very few words, straight on step by step guide.
It should be short, and perhaps you have your own old cheat sheet, and can share that, or quickly from memory share what you already do know.
I am gathering info to create my own tutorial(s).

Right now I am toe dipping, and will jump in soon....but I can be kinda slow getting into the water.

I am adding my own installation guide. I wrote this while installing XAMPP and Modx on my Mac (so certain things will need to be translated to windows etc).


Download XAMP to view php files locally.
http://www.apachefriends.org/en/xampp-macosx.html

Install

Startup and start Apache and MySQL

http;//localhost/xampp/

On the left further down is a link to
http://localhost/phpmyadmin/

Create a database which can be used by Modx.

Unzip modx and place it into XAMPP -> htdocs folder

In your web browser go to
http://localhost/modx/setup/

If you get a FATAL ERROR message:Modx Setup cannot continue. It is probably because the folder is write protected. Inside mod -> core -> is a folder cache that needs to be writable. Right click and choose Get Info (properties). On the bottom it will say if it is write protected or not. Click staff and everyone and choose Read & Write.

Go back and refresh http://localhost/modx/setup/

The Modx installation screen should show up.

Press Next -> New Installation -> Next

Connection information

(I am using Xampp and creating the login name and skipping the password from what Xampp recommends.)

Most of the fields were filled in already. The only field I filled in was login name and Database name.

Host: localhost
login name: root (Xampp mentions it)
password: just skip the password as in no password (Xampp mentions that there is no password)
Database name: I called mine mod
Table prefix: mine is modx_



Click:
Test database server connection and view collations.

Result
Connecting to mysql server: Success!

Click:
Create or test selection of your database.

Result
Checking database: Success!


One will need to fill out the values below. These are the values I used.

Default Admin User

The below username, email and password you can choose as you like.

username: admin (what I chose)
email: [email protected] (my real e-mail address)
password: 12345 (what I chose)
password: 12345 (what I chose)


The Summary page:

My core/export directory is writable: Failed
core/packages directory is writable: Failed
core/config/config.inc.php exists and is writable: Failed

I made the export and the packages directory writable similar to what I did earlier.
Made a new text document, saved it with the rtf ending. Clicked the name and pasted in config.inc.php. Which made the document into a php file. Placed it into the config folder. But text pad placed some text into it so I had to go into dreamweaver and create a php file there. Be sure to check the code that there is no text, if there is just delete it. Or use Notepad or similar text program.

I also had to make the file writable. Right click -> get info and make staff and everyone writeable. Retry the page it should now say ok where it earlier said failed.

Press Install

Next page it says Installation Summary

Press Next

---

Important note:

modx/assets - was not created
modx/assets/components - was not created
modx/core/components - was not created

This is for 3rd party components.

I might as well create these folders. Which I did. These also need to be made writable!

Press Login button

Below is a check box for deleting the setup directory. If I was going to install this on a web site I would likely have the setup folder either renamed or deleted. Since others can access the setup folder and screw up my installation. But I am doing this on my own computer to learn so I am just leaving the setup directory as it is.

Login

Username: admin (admin is the most used username, it is up to you what you want to call it)
Password: whatever you want it to be

admin and 123456 is what I used.
I also pressed the check box Remember me, so that I do not need to fill in username and password every time I plan to check out my modx install folder.

I am in! This is the frontend screen.

Modx is now installed. The next step as I see it is to create some html files and import them into Modx.
I need more practice on design before I go ahead and share it here. I’ll write down as I go.

Hopefully this install guide along with other peoples guides will help with the install. Next up for this community is to create easy to follow bare bones design guides. Bob Ray’s and EinsteinBoi’s Guides will also be of help.

Moving on inward into the design of Modx Revo.

I created a few pages in Dreamweaver containing two images and a css file.

I made the folder assets/test
assets/test/images

I am creating a test site folder where I have the images folder and the css file.

There are certain terms used in Modx:

Chunks contain content (text, html, flash javascript, snippets, etc no php though)
that can be used on any page.
Naming scheme [[$mychunk]]

Snippets contain dynamic (something that changes) php or javascript code that can be used on any page. For instance the Wayfinder snippet (which is a part of the snippet library in Modx) creates menus.

I began by creating a category for my template. In Elements right click Categories -> New Category. I named it test.

To create a template
manager -> elements -> right clicked templates -> new template

Name: test
description: This template contains a header, left menu and main content. The top menu I am going to place into a chunk because I might not use it on every page.
Category: test
saved the file

Right clicked Chunks -> New Chunk
Name: topmenu-test
Description: This is the area for the top menu links.
Category: test

Went into Dreamweaver and copied the topmenu div tag code and pasted it into the Chunk code (html) area. Saved chunk.


Went back into the template. Went to Elements -> Templates -> test -> test (template)

I added the code below. I had to change the location to the css file, and the image files. I added in the topmenu-test chunk. In the main content area one has to add the [[*content]].


<html>
<head>
<link rel="stylesheet" href="assets/test/styles.css" type="text/css" />
</head>

<body>

<div id="header">
<img src="assets/test/images/OSF_logo.gif" width="180" height="128" alt="Oslo Spirituelle Filmklubb logo" />
<img src="assets/test/images/OSF_headline.jpg" alt="Oslo Spirituelle Filmklubb logo" width="587" height="66" class="imagespace" />
</div>

[[$topmenu-test]]

<div id="leftmenu">
<p>Velkommen</p>
<p>Om OSF</p>
<p>Månedens Film</p>
<p>Påmelding</p>
<p>Meldemskap</p>
<p>Nyhetsbrev</p>
<p>Siste Nytt</p>
<p>Film Arkiv</p>
<p>Kontakt</p>
<p>&nbsp;</p>
</div>
<div id="maincontent">[[*content]]</div>

</body>
</html>

In Resources -> right click web -> Create -> Create a document here
Choose the template you want it based on.
Title:
Long title: I am testing this to see how it works.

In the Resource Content area add whatever you like:
So I am testing this out to see how it works.

Save the file, and preview. This is a beginning for me. I look forward to the next steps, but I am finally into the water learning slowly how to swim.

Great work keep it up.

Personally I prefer screencasts I set up two monitors watch one and copy on other pausing as necessary.
Maybe its just me.
@einsteinsboi uses plenty of screenshots and great screencasts (love her accent and clear diction (I’m from Liverpool))

I agree we need more of this.

Not a crit.

You used :-

Password :- 12345
Password :- 12345

Then later To Loginto Manager:-

Password :- 123456

Maybe confusing for complete beginners?

You can edit you own posts.

Welcome to this great community.

Quote from: allanb at Sep 03, 2010, 09:34 PM

Great work keep it up.

Personally I prefer screencasts I set up two monitors watch one and copy on other pausing as necessary.
Maybe its just me.
@einsteinsboi uses plenty of screenshots and great screencasts (love her accent and clear diction (I’m from Liverpool))

thanks for the shoutout allanb, I appreciate it

I’m working on a Revo series now on my blog, parts 1 to 3 are now up and part 4 should be up soon. Will also be doing a bunch of screencasts to go along with this and other Revo stuff too, so keep an eye on the coding pad. Cheers

Thanks for the feedback allanb!

What I am doing is writing by doing. So as I slowly progress I am writing down what I did and posting it here. After I have gone a little further I plan to recreate the progress in Screenflow, a screencasting software. It is one of the best ways to learn I think. Learning by seeing and hearing. Have a great day! I will in a moment begin experimenting with Wayfinder and how to create links. I am posting questions at this thread http://modxcms.com/forums/index.php/topic,52752.0.html

Installing and using Wayfinder - part 1

Installation

Wayfinder

Adding Wayfinder. Go to System -> Package Management
Click Add New Package.
Click Select a Provider. Click Next.
Provider drop down choose modxcms.com. Click Next.
Choose Wayfinder. It will open a new window and lead to the modxcms site.
Click the link to download wayfinder.
Place the zip file into the modx -> core folder -> packages

In the Select Packages to Download popup window - click finish.

Click Add New Package
Click search Locally for Packages.
Search Locally for Packages.
Click Yes. It then looks inside the packages folder.

Wayfinder should show up on the packages page.

Click install.
Go through the steps to install wayfinder.


Using Wayfinder

Begin by removing the existing menu structure, and paste it someplace else.

Replace it with the wayfinder tag:

[[Wayfinder? &startId=`0`]]


---ps if you installed the sample site now is a good time to uninstall (or hide the pages) it since it will show in the wayfinder menu.
System -> package management. Modxss is mentioned. I clicked the uninstall button on the left. There are three options I decided to choose to uninstall but keep it in the system.---

Create the pages/Resources that you need. I created the top site folder and placed the files within it.
Under resources right click -> Create -> Create a Document here.

Pick the template - Uses Template - to connect with the template you created earlier.
There are tool tips/descriptions so just rest the mouse over each field for a moment to gain knowledge about what is is.
Alias is how the page will look like in the url.
Remember to click the Published check box.

Remember that you can drag your files around as you want in the tree structure on the left.

Do a preview.

My site folder showed up on the top with all the submenus beneath.
To hide the top site folder, click the folder and notice the ID. Further down click Hide From Menus.
Go to the template. Change the wayfinder startId from 0 to the site (top) folder ID. Save.
Go to one of the pages and do a preview.