Jump to content
benbyf

PW tuts elsewhere on the web

Recommended Posts

Hi!

I'm writing some tutorials for Tuts+ and I'll put some information here when I have it. Love to hear your suggestions, and I think a couple of other people are wirting tutorials there and of course many other places.

  • Like 4

Share this post


Link to post
Share on other sites

anyone have any thoughts or examples of tutorials for theme building in PW, just about to write mine as part of a series on envato. Ideally I'm looking to make my tutorial about making a complete theme for a simple website based from PW's site-default.

  • Like 1

Share this post


Link to post
Share on other sites

mainly advice on what you'd want to see if you were new to PW theming

Share this post


Link to post
Share on other sites

I personally have some struggles with the main concepts

templates, fields and how to use them in different pages.

I remember making a website with a different field for each data, because different labels were needed

then later I discovered that you can assign different labels for each page context.

The approach for templates, fields and pages that I found easier to explain

is like OOP Classes, Properties and Instances.

Template = Class

Field = Property

Page = Instance

Now you can use any UML tool to create a class diagram for a website in Processwire

and explain that to every developer that knows UML.

  • Like 1

Share this post


Link to post
Share on other sites

mainly advice on what you'd want to see if you were new to PW theming

I would like to make a suggestion, which combines this topic with those of the cheat sheet and documentation topics, and the blog posts covering filed type definitions.

I would think that someone new to processwire isn't concerned so much as how to design a front-end layout as it is how to use the power of the api as it relates to both the front-end and manipulating the supporting data. I think most people coming to processwire already have a decent grasp of HTML, PHP, etc., but lack an understanding of how to assemble all the excellent tools found within the processwire core to accomplish a desired goal. Based on the recent (past few weeks) forum topics, tutorials could cover menu creation, searching, extracting specific data from one or more pages, defining multi-language interfaces, etc.

As there are many ways to approach a general objective, I would like to see specific procedures that utilize the efficiency of processwire. A great example is this tutorial by LostKobrakai. And even though there are excellent modules available that satisfy specific development requirements, there is still a need (at least for me) for a centralized location of instructional information. The resulting tutorial code samples could then be integrated into the appropriate sections of the cheat sheet and the general documentation.

  • Like 1

Share this post


Link to post
Share on other sites

I think clsource and rick are right; even a tutorial for those new to ProcessWire should assume a general understanding of entity relationships, procedural programming, html and css, and it should concentrate on the methods and design patterns that beginners can easily implement to craft a site with typical components such as general pages, blog posts with categories and tags, a simple contact form and maybe a simple user management to protect a given page (and its children) on the frontend ("customer area"). By choosing a css framework, you can skip the design process altogether.

  • Like 1

Share this post


Link to post
Share on other sites

One more thing to add. Yesterday I decided to utilize clsource's class:

https://processwire.com/talk/topic/4550-debugging-tips/?p=108300

I added namespace ProcessWire; to it and modified it a tiny bit so that I can also log the class/type name of the logged variable, and the file and line number of the caller. Recommending an easy to use method for debugging (that even works in production, on whatever server this site might be running) seems to be a good idea to include.

  • Like 2

Share this post


Link to post
Share on other sites

One more thing to add. Yesterday I decided to utilize clsource's class:

https://processwire.com/talk/topic/4550-debugging-tips/?p=108300

I added namespace ProcessWire; to it and modified it a tiny bit so that I can also log the class/type name of the logged variable, and the file and line number of the caller. Recommending an easy to use method for debugging (that even works in production, on whatever server this site might be running) seems to be a good idea to include.

I would love to see that code :D

Share this post


Link to post
Share on other sites

Edit: an updated version of the the following class can be found here: https://processwire....-tips/?p=110290

<?php namespace ProcessWire;
/**
 * Helps with the debugging log
 */
class Flog {
    protected static $name = 'flog';
    protected static $firstSave = true;

    public static function init() {
        if(!file_exists(self::filename())) {
            self::log('f-log debug file created...');
        }
    }

    public static function log($param, $file = '', $line = '') {
        $prepend = '';
        if (gettype($param) != "object") {
            $prepend = gettype($param);
        } else {
            $prepend = get_class($param);
        }
        if (is_array($param)) {
            $param = json_encode($param);
        }
        if (self::$firstSave) {
            self::$firstSave = false;
            wire('log')->save(self::$name, "________________________ Flog log _______________________");
        }
        if ($file) {
            $file = basename($file, '.php');
            $line = $line . ' ';
        }
        wire('log')->save(self::$name, "$file $line"."[$prepend] $param");
    }

    public static function filename() {
        return wire('log')->getFilename(self::$name);
    }

    public static function name() {
        return self::$name;
    }
}
The original class was dubbed Debug, which is used in the ProcessWire namespace, so I had to rename it. The "Flog log" line helps me quickly identify the various "logging sessions". File and line number can be used to identify the states of the same variable and later on to clean up (delete) all the temporary log method calls.
I use a shortcut to quickly insert Flog::log($var, __FILE__, __LINE__); into the code, I just have to overwrite the variable name, and save+refresh the browser (using a shortcut in this case too). A code editor is used to keep the log file(s) open, which refreshes the open files whenever they change. I can delete lines from the log at will, since it is an actual editor. Simple but effective, I got used to this a debug workflow, since it can be used in any environment.
Edited by szabesz
  • Like 1

Share this post


Link to post
Share on other sites
@benbyf You might find this class useful if you want to introduce the classic way of php debugging:


Another thing that might be of interest is a short introduction to the main components of ProcessWire. What important building blocks are used in the CMS/framework, what they are for, how they work together, and which ones should be further studied as starting points, how modularity is implemented (CMS vs CMF). Such as: message system, logging system, 3.x compilation, wire calls, etc...

Something similar: cms architecture diagram

And links to Ryan's blogpost or other related doc pages for further study.

I have not found anything similar so far, and it would help me a lot, I'm sure :)

  • Like 1

Share this post


Link to post
Share on other sites

my beginners guide is now live on Tuts+: How to install and setup PW CMS http://webdesign.tutsplus.com/tutorials/how-to-install-and-setup-processwire-cms--cms-25509

I also saw that Francesco Schwarz post went live today: 4 Reasons to Choose ProcessWire as Your Next CMS http://code.tutsplus.com/articles/4-reasons-to-choose-processwire-as-your-next-cms--cms-25062

  • Like 13

Share this post


Link to post
Share on other sites

Thanks for this Ben!  ^-^

I was about to hit the comments but I see Ryan has already mentioned what I had in mind :-)

  • Like 1

Share this post


Link to post
Share on other sites

Yeah just read it. Since I came across the delayed output (and using leading underscore for view files)

I fell in love with it. Set variables (or placeholders as some call it) with init values, output them in _main.php,

give them overrides as needed in a template file. Use wireRenderFile() for view files. You can in fact

stack your site with any layers you want, outputted in _main.php :)  ;)  ^_^

  • Like 2

Share this post


Link to post
Share on other sites

Yeah just read it. Since I came across the delayed output (and using leading underscore for view files)

I fell in love with it.

That's just the thing with PW: there's rarely a "right way" to do something. When it comes to things like templating, I still think that for a beginner it's best to start with the simplest possible scenario, which would be direct output. Once you grasp that, it's much easier to understand how delayed output or some of the more advanced output strategies work.

For an example my own favorite output pattern is loosely based on model-view-controller. It's entirely based on template files, and comprised of a shared front controller, template-specific controllers and view scripts, partials, and layouts. The result is a structure that in my opinion can be easily adapted to all kinds of sites, applications, and so on.

Would I recommend this as the first thing a complete beginner should learn? Probably not :)

  • Like 1

Share this post


Link to post
Share on other sites

That would lead to a delayed output from a beginner - if any output at all :)

  • Like 4

Share this post


Link to post
Share on other sites

That's just the thing with PW: there's rarely a "right way" to do something.

I've seen that line a few times before, but the thing is, with PW it's the first time "I've got it right", everything makes so much sense.

Share this post


Link to post
Share on other sites
For an example my own favorite output pattern is loosely based on model-view-controller. It's entirely based on template files, and comprised of a shared front controller, template-specific controllers and view scripts, partials, and layouts. The result is a structure that in my opinion can be easily adapted to all kinds of sites, applications, and so on.

Would I recommend this as the first thing a complete beginner should learn? Probably not :)

Interesting, would you be able to share your layout as a site profile, or at least show the folder structure?

Share this post


Link to post
Share on other sites

Interesting, would you be able to share your layout as a site profile, or at least show the folder structure?

I'll try to put a simple example online later today.

Share this post


Link to post
Share on other sites

Check the link as it reverts back to this page. (still happens on 20:00 gmt time)

Hover the mouse over the link and you'll see.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Kevin C. McCarthy
      I am desperate to learn how to you ProcessWire to it's fullest potential, and while the documentation is great and always appreciated, I simply can't follow along because it gets way too technical without really showing how applicable and versatile it can be. Then again, I'm almost a moderate understanding of PHP and no experience with APIs or programming JavaScript—so it's probably leagues ahead of where I am at the moment. That said, I learn best by watching and the doing. Think Codecademy or FreeCodeCamp. I was wonder if there are any video tutorials or walk-through lessons to give me a greater understanding of ProcessWire and how to utilize it effectively.
      For some background, I'm great with WordPress and I'm great with writing websites by hand with Notepad only. The biggest hurdles I have with PW is the phrasing is so far left of WP at times that it's a massive hurdle for me to get over. Like in WP, themes, templates, etc are totally different things. And as someone who builds WP sites for a living, it gets hard to kill those old preconceived meanings.
      I want to start building out PW sites for numerous reasons. For one, most of my clients they would benefit from it vs the Bloated Beast. Two, it would allow me to differentiate me in a market saturated by WP devs. I know I have a long ways to go until I reach that point of considering myself a "PW dev", but I am desperate for resources to help me wrap my head around it.
      I've built my own website in PW but TBH it only handles some of the data while most of the text has been hard-coded into the PHP template files because I couldn't get my my head around the "best practice" of structuring the data.
      Anyway, enough rambling, I'm just hoping those of you in the community can point me to easily-digestible sources out there that can help move me along so I can actually benefit from using the platform. Thank you!
    • By jean-luc
      Docker (http://www.docker.com) is an open platform for building, shipping and running distributed applications.   Docker containers are a great way to package a complete application with its specific dependencies in a portable way so that it can easily be deployed on any compatible network or cloud infrastructure.   Recently I spent a few days making my ProcessWire site run in a Docker container, and - as I could not find any good tutorial for this - it sounded like a good idea to write one.    You will find on the web plenty of presentations and tutorials about Docker, so I won't start with the basic concepts, and this tuto assumes that you have a first understanding of Docker's fundamentals.   What we want to do here is to migrate an existing site to a set of docker containers.   Therefore, to start with, you should have: - docker installed on your computer; - the site directory of your ProcessWIre site - a backup of your site's MySQL database   Let's start.   Create a docker container for the site database   For several reasons (insulation, security, scalability), it is preferable to host the site database in a separate docker container.    1. Set-up a SQL database with MariaDb or MySQL $ docker run --name database -e MYSQL_ROOT_PASSWORD=rootdbpassword -d mariadb Here I choose to use the MariaDB official container in its latest version, but MySQLwould be just fine as well.   2. Run a PhpMyAdmin container and create the ProcessWire database      We first select an simple image with PhpMyAdmin on the Docker Hub: nazarpc/phpmyadmin and we create a docker container based on this image. This container will  access the port exposed by the database container via a private networking interface. We specify this with the `--link` option.   It can be run temporarily (and exited by ctrl-C): docker run --rm --link database:mysql -p 8881:80 nazarpc/phpmyadmin Or it can be run as a daemon in the background: docker run -d --name phpmyadmin --link database:mysql -p 8881:80 nazarpc/phpmyadmin From phpmyadmin (accessed from your browser at http://hostaddress:8881) you can now create your ProcessWire database, create a dedicated user for it, and import the database content from a previously saved SQL file.   Note: alternatively, you can do all database operations from the command line in the database docker container created during step 1, or use another mysql user interface container if you prefer…   3. Update the database parameters in your site configuration   In your site's `config.php` file, the sql server name shall be set to `mysql`: $config->dbHost = 'mysql'; Other `$config->dbXxx` settings shall match the database name, user and password of the just-created database.     Create a Docker Image for Apache, PHP and the Processwire site   1. Create an image-specific directory with the following contents and `cd` to it bash-3.2$ ls -l . config .: total 16 -rw-rw-rw-   1 jean-luc  staff  1163 21 aoû 12:09 Dockerfile drwxr-xr-x  17 jean-luc  staff   578 17 aoû 12:48 ProcessWire drwxr-xr-x   7 jean-luc  staff   238 21 aoû 12:07 config drwxr-xr-x   7 jean-luc  staff   238 20 aoû 18:46 site config: total 160 -rw-rw-rw-  1 jean-luc  staff    160 20 aoû 18:28 msmtprc -rw-rw-rw-  1 jean-luc  staff  72518 20 aoû 18:56 php.ini where: `ProcessWire` contains the version of ProcessWire that we want to use for this site;  
      It can be retrieved from github with a link like https://github.com/ryancramerdesign/ProcessWire/archive/{version}.zip`  
      For example, the 2.6.13 dev version can be obtained by the link https://github.com/ryancramerdesign/ProcessWire/archive/7d37db8d6b4ca6a132e50aff496a70e48fcd2284.zip `site`: our site-specific files `Dockerfile`: the dockerfile for building the image (see below) `config`: a directory containing specific configuration files copied to the docker image (see below) 2.  Set the `Dockerfile` content FROM php:5.6-apache RUN    apt-get update \ && apt-get install -y libfreetype6-dev libjpeg62-turbo-dev libmcrypt-dev libpng12-dev zziplib-bin msmtp\ && a2enmod rewrite \ && a2enmod ssl \ && docker-php-ext-install mysqli pdo_mysql iconv mcrypt zip \ && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \ && docker-php-ext-install gd  EXPOSE 80 EXPOSE 443 # Add a specific php.ini file COPY config/php.ini /usr/local/etc/php/ # Configure the mail sent utility msmtp (http://msmtp.sourceforge.net) and make it readable only by www-data COPY config/msmtprc /usr/local/etc/php/ RUN chmod 600 /usr/local/etc/php/msmtprc \ && chown www-data:www-data /usr/local/etc/php/msmtprc # Remove all default site files in /var/www/html RUN rm -fR /var/www/html/* # Copy ProcessWire core files COPY ProcessWire/wire /var/www/html/wire COPY ProcessWire/index.php /var/www/html/index.php COPY ProcessWire/htaccess.txt /var/www/html/.htaccess # Copy site-specific files COPY site /var/www/html/site # Make www-data the owner of site-specific files RUN chown -R www-data:www-data /var/www/html/site VOLUME /var/www/html/site Based on the official image `php:5.6-apache`, it installs missing packages to the system, adds  mod-rewrite and mod-ssl to Apache, plus a number of PHP modules needed by Processwire (core or modules): mysqli, pdo_mysql, iconv, mcrypt, zip, and gd.   Then it copies the site files to the location expected by the Apache server.  Finally it declares a Docker volume `/var/www/html/site` (i.e. the site files and assets), so that it can be shared with other containers.   3. Set the msmtp configuration   We need to configure a sendmail utility, so that we can send emails from php, for example when a user registers on the website. The simplest way to do it is to rely on an external smtp server to do the actual sending. That's why we use msmtp.   - define the desired smtp account in `config/msmtprc` account celedev-webmaster tls on tls_certcheck off auth on host smtp.celedev.com port 587 user webmaster@celedev.com from webmaster@celedev.com password thepasswordofwebmasteratceledevdotcom   - in `config/php.ini`, configure the sendmail command so it uses msmtp: sendmail_path = /usr/bin/msmtp -C /usr/local/etc/php/msmtprc --logfile /var/log/msmtp.log -a celedev-webmaster -t   4. Build the Docker image docker build -t php-5.6-pw-celedev . 5. Create a Data-only container for the site files docker run --name celedev-data php-5.6-pw-celedev echo "Celedev site data-only container" 6. Run the web server container docker run --name celedev-site -p 8088:80 --link database:mysql --volumes-from celedev-data -d php-5.6-pw-celedev Note that this container is linked to our database and shares the 'celedev-data' volume created previously   During development, it can be convenient to keep an access to the host file system from the container. For this, we can add a shared volume to the previous command: docker run --name celedev-site -p 8088:80 --link database:mysql -v /Users/jean-luc/web/test-docker:/hostdir --volumes-from celedev-data -d php-5.6-pw-celedev   Our ProcessWire website is now up and running and we can test it in our browser at http://hostaddress:8088. Great!   What we now have in Docker bash-3.2$ docker images REPOSITORY            TAG                 IMAGE ID            CREATED             VIRTUAL SIZE php-5.6-pw-celedev    latest              2aaeb241c2e2        3 hours ago         1.149 GB nazarpc/phpmyadmin    latest              e25cd4fd48b3        8 days ago          521 MB mariadb               latest              dd208bafcc33        2 weeks ago         302.2 MB debian                latest              9a61b6b1315e        5 weeks ago         125.2 MB bash-3.2$ docker ps -a CONTAINER ID        IMAGE                 COMMAND                  CREATED             STATUS                    PORTS                                         NAMES 68cc5d976f0d        php-5.6-pw-celedev    "apache2-foreground"     20 hours ago        Up 20 hours               443/tcp, 0.0.0.0:8088->80/tcp                 celedev-site 0729fe6d6752        php-5.6-pw-celedev    "echo 'Celedev site d"   20 hours ago        Exited (0) 20 hours ago                                                 celedev-data e3e9e3a4715c        mariadb               "/docker-entrypoint.s"   3 days ago          Up 3 days                 3306/tcp                                      database Saving the site data   We can create an archive of the site files by running a tar command in a dedicated container: bash-3.2$ docker run --rm -it --volumes-from celedev-data -v /Users/jean-luc/web/test-docker:/hostdir debian /bin/bash root@2973c5af3eaf:/# cd /var/www/html/ root@2973c5af3eaf:/var/www/html# tar cvf /hostdir/backup.tar site root@2973c5af3eaf:exit bash-3.2$ Tagging and archiving the Docker image   We can also add a tag to the docker image that we have created in step 4 (recommended): bash-3.2$ docker tag 2aaeb241c2e2 php-5.6-pw-celedev:0.11 bash-3.2$ docker images REPOSITORY            TAG                 IMAGE ID            CREATED             VIRTUAL SIZE php-5.6-pw-celedev    latest              2aaeb241c2e2        3 hours ago         1.149 GB php-5.6-pw-celedev    0.11                2aaeb241c2e2        3 hours ago         1.149 GB nazarpc/phpmyadmin    latest              e25cd4fd48b3        8 days ago          521 MB mariadb               latest              dd208bafcc33        2 weeks ago         302.2 MB And we can archive this image locally if we dont want to push it now to the Docker Hub: bash-3.2$ docker save php-5.6-pw-celedev:0.11 | gzip > php-5.6-pw-celedev-0.11.tar.gz  And that's it!
      You now have a portable image of your ProcessWire website that you can run directly on any docker-compatible system.
    • By gemini
      The tutorials for getting started were excellent resources. Awesome starter to go with a solid core. 
      loving PW.
    • By AndreJansen
      Hi,
      Is this http://wiki.processwire.com/index.php/Basic_Website_Tutorial site still up and running? When trying to access the tutorial the browser only returns a white screen.

    • By clsource
      As some may now,
      the admins on tuts plus declined making a course on processwire :C
      Here´s the link
      http://tutsplus.uservoice.com/forums/248750-what-would-you-like-to-learn/suggestions/6769150-using-processwire-for-web-development
      So, Maybe we should make our own course?.
      I found this website for making such courses.
      https://usefedora.com/
      I hope someday, more people will know the joy of processwire

×
×
  • Create New...