Teaching PHP to students (with ATK)
Most open-source software is built by senior developers for senior developers and is absolutely impossible for a young developers to learn within a reasonable time-frame. That is one of the reasons why so many PHP developers never learn properly and will either keep hacking together Wordpress plugin mash-ups or switch to JavaScript.
Remembering my days of Borland Pascal — I had a polished and simple IDE from the day one where I was able to express myself in the code — this is what made coding possible for me. But as my generation of programmers matured, the young generations became increasingly neglected.
I am very inspired by initiative from Apple to teach coding to students, but for a language such as PHP, there is no central authority who can take on the task of making it more fun for students. In order for this wonderful language not to dry out, I made it my goal to make PHP more welcoming to beginners and those who have no coding experience.
Where I think problems are in learning?
We all think that what must be changed is “how we learn”. My belief is that we should ask ourselves “what we learn”. So instead of “popular” web framework I focus on “easy-to-learn” framework.
One of the goals of ATK framework (which I have authored) is to make the process of building Web Apps easy for newcompers. This is done by hiding some technologies (CLI, HTML, CSS, JS, SQL, Docker) and regarding them as implementation detail.
Here are some of the examples that tend to tangle up the learning process:
- work with command-line can create many irrelevant problems.
- SQL is very specific, distracting and does not fit the code pattern.
- custom design and style tweaking only makes things look worse.
- Linux/Docker/Apache/PHP setup knowledge is irrelevant.
I have decided to focus on installation experience and here it is — done in under a minute:
Not only the bundle works on your computer without any extra downloads (Mac has PHP pre-installed), but it contains empty Git repository making it just as simple to push it to “Github.com” and deploy to “Heroku”.
Testing ATK on school students
My theory off build web apps without digging into “implementation details”, had to be put for a test.
We approached a group of school students (aged 15–18) who knew a little bit of Pascal and had absolutely no experience in Web App or SQL development. Students were invited into a weekend “Web App Coding school”. Our goal was to work with the students once a week and teach them how to build Web Apps.
Each lesson takes approx 40 minutes — first part consisting of a “theory” and followed up with a “practice”.
Instant Gratification of a First Lesson
The first lesson is the most important for the motivation. It is our opportunity to make students passionate about what they are about to learn.
Many use this opportunity to “demonstrate” what students will be able to do in a years time. We wanted to do better than that. We wanted to let students experience first results by the end of the first lesson.
We have equipped students with some code snippets they can try out right away.
// add button and a link:
$app->add('Button')->link('http://google.com/');// add menu with item
$menu = $app->add('Menu');
$menu->addItem('my link', 'http://google.com');// ..
Having things appear in the app like that gives a huge gratification right away. We also instructed how to install Atom and GitHub Desktop so that students can edit their app code and save it for the next time.
During the practical part, each student had a chance create a very personal and functional app. Some students relied on the basics and examples.
Others started experimenting with the components and make use of their existing knowledge of variables and loops to really try out new things.
Lesson two — share with the world
Today it is very important to be able not only to create something, but to also share it. The second lesson was dedicated to going through the code lines which students successfully copy-pasted and tweaked, and to deploy them to their own personal domain using Heroku.
This addressed two goals — make students able to understand how their code works and also share their apps with their peers. To prompt collaboration, we created a facebook group where students where showing off their work.
From a long-term benefit perspective — our first two lectures have introduced students to their first work pattern — code, refresh, commit, deploy.
Lesson 3–5: The Essentials
The next few session we focused at the core concepts of ATK UI, that students will use every time they work on apps. Theory was a bit more in-depth and practical tasks were more useful and fun:
Choosing components
ATK has 30+ components powered by Semantic UI. We want students to be comfortable at adding them into their apps, so we introduced a first 5 components (buttons, labels, menus, tabs, headers) and explained where they can find other component documentation. Here is another student work from lesson 3:
Navigation, GET arguments, Includes
PHP Web Apps are different to most other apps in the way how information travels between the back-end app and the browsers. Our next theoretical part has explained the concept of passing GET arguments between requests.
We deliberately skip the explanation of POST/SESSION until later time, because often students try to use those creating anti-patterns. (Some components such as Form uses POST transparently).
For the practical exercises we were solving math tasks and making basic games:
Logic, Loops and Variables
This is finally our opportunity to tell students more about PHP language constructs: conditions, loops, variables, functions. Again, we are doing it with a practical app — implementation of Pythagorean Theorem:
Storing data in SQL database
We waste no time learning about how to write SQL statements and instead teach how to use data abstraction framework. This is much easier to understand and gives immediate results. After some explanation on data types, students can now implement a basic data manipulation pattern in an app:
Project #1 — Party Time
The rest of our lectures is broken down into “projects”. The goal is to teach students how to dissect client requirements, how to plan work and how to structure the application. Each project will be increasingly more challenging.
Our first project — Party Time — is a basic Event RSVP app with an admin.
Students are presented with the “business case” of the application and discuss how to build app using the tools they have learned so far.
Party Time introduces a concept of “frontend” and “admin” interfaces — students have to understand different user roles and the process how they interact with the data.
We also gradually include various concepts into the projects and this time we explain about “validation” telling students how mandatory fields are displayed and behave.
The “Dashboard” page introduces a concepts of “formulas” (or aggregation) or a way to operate with multiple records simultaniously on the SQL server. This is a unique feature of ATK Data framework which kinda makes SQL language even less important and can be easily explained using Excel formula analogy.
Further Projects
We’ve built more project. For some of those our students gave us ideas. We encourage students not only to build projects but to go and “integrate” them. Try to convince other students, parents or teachers into using Web Apps is challenging but gives a very valuable feedback.
Another important point in our apps is ability to “take what’s available” and we often look at 3rd party add-ons, or services that can simplify our task.
Here is our current project line-up:
- Project #2 — Money lending. App tracks how much money user have lent to his friend. It also integrates with Email / SMS gateways to send friends reminders. Here we also finally introduce “Composer” and command-line. Also here we introduce concept of “business logic” separation from “ui”.
- Project #3 — Librarian. Here we get to finally practice with model references, deep traversal, conditions and expressions. This is a first multi-user application with a deeper concept of a user role and data access. We also set a potential goal of making a real software for your school’s library.
- Project #4 — Bank. Why not create your own bank? This application incorporates learning about creating RestAPI interface for mobile application integrations. It makes sense for students to work in a team and to also find someone who knows a little bit about Mobile Apps to create integration. Additionally the app can be adopted to implement school-wide “points” currency and implementing houses (Like “Gryffindor” from Harry Potter books) for your school!
Conclusion
What has started as an experiment for us turned into a passionate and engaging series of activities with our students eventually getting more and more students involved. Our “Web App Coding School” is still held on a weekly basis. We managed students excited about Web App development and PHP and they kept coding their apps at home and in free time and work on their personal projects.
Would you like to have a similar experience in your school?
